AngularJS 04(监听、指令)

Jquery是一种类库，算不上框架。
Angular是一个半成品的框架，基于JS，帮助我们简化我们的开发。帮助我们主要实现单页面的增删改查操作。至于页面的渲染和用户体验、交互操作则不是Angular所擅长的。并且不能代替JQuery，他用到了一部分jQuery而且保证了和JQuery互相兼容。
框架是一种限制，限制我们不能做什么。
插件比框架小的多，他是日常常见的功能或者用户常见的模块的模块化，帮助我们实现局部的功能。

*review
指令和表达式
ng-app=”“定义范围
ng-init=”” 在应用程序运行前运行的，相当于静态变量
ng-bind=”” 单向绑定
ng-model=”“双向绑定
ng-repeat=”“遍历

{{}}

行为和表现相分离
//DI
function funcName($scope，$element){
}
通过模块来管理控制器，通过控制器来设计数据和方法
模块（module）
angular.module(“myApp”,[])
.controlller(“ctrlNmae”,book)

• $scope：HTML和JS之间传递数据
• $element:是一个Jquery对象,他获取到你当前绑定的控制器所在的作用域的元素标签

监听

$scope.$watch('w',function(to,from){d.width(to);});

from是上一次定义的，to是最新的，当前定义的
通过监听input框内值的改变，从而改变div的宽高。

<div ng-controller="watchCtrl"><div style="width:100px;height:100px;background-color: red;;">div><div>{{w}}-{{h}}div><div><input type="text" ng-model="w" /><input type="text" ng-model="h" />div>
div>
<script>
function watchCtrl($scope,$element){//获取子节点var d=$element.children().eq(0);$scope.w=d.width();$scope.h=d.height();$scope.$watch('w',function(to,from){d.width(to);});$scope.$watch('h',function(to,from){d.height(to);});}
script>

点击事件触发事件。changeSize()不是JavaScript的函数而是在Angular中定义的函数

ng-click=”changeSize()”

指令

1. 模板包含 ng-include
2. 节点控制 ng-style、ng-class、显示和隐藏、其他属性

ng-include

• 直接引用外部文件（局部页面）

• 脚本不要引用，引用脚本会出问题

  -
  -

ng-style
直接指定样式

<div ng-controller="styleCtrl"><input type="color" ng-model="color" />{{color}}<div ng-style="myStyle">div>div>
<script>function styleCtrl($scope) {$scope.color = "blue";$scope.myStyle = {width: 100,height: 100,backgroundColor: $scope.color};$scope.$watch("color",function(to,from){$scope.myStyle.backgroundColor=to;})}script>

ng-class
直接指定类

<div ng-init="myClass='jumbotron'"><div ng-class="myClass">div>
div>

ng-show,ng-hide
显示隐藏
ng-show=”true”,ng-show=”false”
ng-hide=”true”,ng-show=”false”

<div ng-init="flag=true;msg='这里可以自定义修改内容'"><button ng-show="flag" ng-click="flag=!flag" type="button" class="btn btn-default">Editbutton><button ng-hide="flag" ng-click="flag=!flag" type="button" class="btn btn-default">Submitbutton><div ng-show="flag" class="jumbotron"><h1>{{msg}}h1>div><div ng-hide="flag" class="jumbotron"><input type="text" class="form-control" ng-model="msg" />div>
div>

ng-switch
用在做展示的时候用到的，也就是switch分支判断

<div ng-init="dow='thur'"><ul ng-switch on="dow"><li ng-switch-when="sun">星期日li><li ng-switch-when="sat">星期六li><li ng-switch-default>工作日li>ul>
div>

ng-src src属性
ng-href href属性
ng-checked 选中状态
ng-selected 被选择状态
ng-disabled 禁用状态
ng-multiple 多选状态
ng-readonly 只读状态

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！