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 只读状态