AngularJS学习笔记——指令

AngularJS

本文摘自《AngularJS权威教程》

一、 介绍：一种构建动态Web应用的结构化框架。

• AngularJS主要用于构建单页面Web应用。
• 高级功能：解耦应用逻辑、数据模型和视图；Ajax服务；依赖注入；浏览历史；测试

二、 指令：本质上就是AngularJS扩展具有自定义功能的HTML元素的途径。

• 指令可以和其他指令或属性组合在一起使用，这种组合使用的方式叫合成

<video my-href="/goofy-video.mp">
Can still take children nodes
</video>

• 通过AngularJS模块API中的.directive()方法，我们可以通过传入一个字符串和一个函数来
  注册一个新指令。其中字符串是这个指令的名字，指令名应该是驼峰命名风格的，函数应该返回
  一个对象。

angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<a href="http://google.com">,Click me to go to Google < /a>'
    };
});

• 通过更改restrict来配置指令用于哪种格式，指令中可以指定以元素（E）、属性（A）、类（C）或注释（M）。无论有多少种方式可以声明指令，我们坚持使用属性方式，因为它有比较好的跨浏览器兼容性：

三、 内置指令：以ng为前缀的标签

除了<form>和<a>标签被重载以外，通常以ng为前缀。<form>标签被从底层扩展了一系列高级功能，包括表单验证等

(1) 基础ng指令_布尔属性：布尔属性代表一个true或false值。当这个属性出现时，这个属性的值就是true（无论实际定义的值是什么）。如果未出现，这个属性的值就是false。

• ng-disabled可以把disabled属性绑定到一些表单输入字段上，例如：5S后启动textarea

<textarea ng-disabled="isDisabled">Wait5seconds</textarea>
angular.module('myApp', [])
    .run(function($rootScope, $timeout) {
        $rootScope.isDisabled = true;
        $timeout(function() {
            $rootScope.isDisabled = false;
        }, 5000);
    });

注意：为什么这里使用$timeout而不直接使用setTimeout。因为$apply都会自动执行，所以你不用担心，但是如果你使用了angular之外的功能，比如直接调用了setTimeout函数、挂接了jquery的事件、使用了jquery的ajax操作等等，那么系统就没有机会帮你调用$apply，界面也就没有机会刷新了

• ng-readonly : 同ng-disabled类似

• ng-checked : checkbox是否被选中

• ng-selected: ng-selected可以对是否出现option标签的selected属性进行绑定：

<select>
<option>One Fish</option>
<option ng-selected="isTwoFish">Two Fish</option>
</select>

(2) 基础ng指令_类布尔属性：ng-href、ng-src等属性虽然不是标准的HTML布尔属性，但是由于行为相似，所以在AngularJS源码内部是和布尔属性同等对待的。

• ng-href: 当使用当前作用域中的属性动态创建URL时

• ng-src: AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像

(3) 创建子作用域的ng指令：下列指令在使用中会自动创建子域: ng-controller,ng-include,ng-switch,ng-repeat,ng-view,ng-if。

• ng-controller会以父级作用域为原型生成子作用域。

<div ng-controller="ParentController">
    {{someBareValue}}
    <button ng-click="someAction()">Communicate to child</button>
    <div ng-controller="ChildController">
        {{someBareValue}}
        <button ng-click="childAction()">to parent</button>
    </div>
</div>
<script type="text/javascript">
angular.module('myApp', [])
.controller('ParentController', ['$scope', function($scope) {
$scope.someBareValue = "parent";
$scope.model = {
    name : "pengchen"
};
$scope.someAction = function() {
    $scope.someBareValue = "from parent";
}
}]).controller('ChildController', function($scope) {
$scope.someBareValue = "child";
$scope.$parent.someBareValue = "change";
$scope.model.name = "tangmin";
console.log($scope.model.name);
console.log($scope.$parent.model.name);
$scope.childAction = function() {
    $scope.someBareValue = "from child";
}
});
</script>

代码中，ChildController中的$scope可以访问并修改ParentController中$scope的属性，反之则不行。

• ng-include:使用ng-include可以加载、编译并包含外部HTML片段到当前的应用中。 使用ng-include时AngularJS会自动创建一个子作用域。

• ng-switch:这个指令和ng-switch-when及on="propertyName"一起使用，可以在propertyName发生变化时渲染不同指令到视图中。

<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>

• ng-view: ng-view指令用来设置将被路由管理和放置在HTML中的视图的位置

• ng-if: ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。

• ng-repeat:ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。

<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
{{person.name}} lives in {{person.city}}
</li>

• ng-init:ng-init指令用来在指令被调用时设置内部作用域的初始状态

(4) 其他指令：

• {{ }} 和 ng-bind:在屏幕可视的区域内使用{{}}会导致页面加载时未渲染的元素发生闪烁，用ng-bind可以避免这个问题

• ng-bind-template: 与ng-bind类似，可以用来绑定多个表达式

• ng-model:用来将input、select、text area或自定义表单控件同包含它们的作用域中
  的属性进行绑定

• ng-show/ng-hide:显示或隐藏元素

• ng-change: 在表单输入发生变化时计算给定表达式的值

• ng-form: ng-form用来在一个表单内部嵌套另一个表单

• ng-click:元素被点击时调用

• ng-select:用来将数据同HTML的<select>元素进行绑定

• ng-submit:用来将表达式同onsubmit事件进行绑定

• ng-class:动态设置元素的类。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。

四、 指令详解：以ng为前缀的标签

(1). 指令定义：使用directive()进行定义

以下是配置指令的全部选项设置：

angular.module('myApp', []).directive('myDirective', function() {
    return {
        restrict: String,
        priority: Number,
        terminal: Boolean,
        template: String or Template Function: function(tElement, tAttrs)(...
        },
        templateUrl: String,
        replace: Boolean or String,
        scope: Boolean or Object,
        transclude: Boolean,
        controller: String or
            function(scope, element, attrs, transclude, otherInjectables) {...
            },
        controllerAs: String,
        require: String,
        link: function(scope, iElement, iAttrs) {...
            },
        compile: // 返回一个对象或连接函数，如下所示：
            function(tElement, tAttrs, transclude) {
                return {
                    pre: function(scope, iElement, iAttrs, controller) {...
                    },
                    post: function(scope, iElement, iAttrs, controller) {...
                    }
                }
                // 或者
                return function postLink(...) {...
                }
        }
    };
});

• restrict:restrict是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。EACM
• priority: 优先级：具有更高优先级的指令总是优先运行。
• terminal: 是一个布尔型参数，可以被设置为true或false。这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。
• template: 可以接收一段文本或一个函数
• templateUrl:
• replace: 默认值为false，当为true时模板元素将替换指令元素

(2). 指令作用域：

• scope: 默认值是false，当scope设置为true时，会从父作用域继承并创建一个新的作用域对象。

  例如：当scope为true时，在指令中新建了一个作用域对象，Outside myDirective无法访问myProperty; 为false时，则可以访问。

  <br> Outside myDirective: {{ myProperty }}
  <div my-directive ng-init="myProperty = 'wow, this is cool'">
      Inside myDirective: {{ myProperty }}
  </div>

  当scope设置为空对象{}时，就创建了一个隔离作用域，模板就无法访问外部作用域了。

(3). 绑定策略：

使新的指令作用域访问本地变量：

a) 本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定
b) 双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定;就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变
c) 父级作用域绑定 通过&符号可以对父级作用域进行绑定，以便在其中运行函数; 意味着对这个值进行设置时会生成一个指向父级作用域的包装函数

• transclude: 嵌入，只有当你希望创建一个可以包含任意内容的指令时，才使用transclude: true
• controller:定义控制器
• controllerAs: 用来设置控制器的别名，可以以此为名来发布控制器
• require: require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。