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

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

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

  -<div ng-include src="'header.html'"></div>
  -<div ng-include="'header.html'"></div>

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">Edit</button>    <button ng-hide="flag" ng-click="flag=!flag" type="button" class="btn btn-default">Submit</button>    <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 只读状态