学习AngularJs:Directive指令用法（完整版）

tip：当你想要创建一个可重用的组件时隔离作用域是一个很好的选择，通过隔离作用域我们确保指令是‘独立'的,并可以轻松地插入到任何HTML app中，并且这种做法防止了父作用域被污染；
7.2隔离作用域可以通过绑定策略来访问父作用域的属性。
directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互。这三种分别是

@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。

@ 局部 scope 属性

@ 方式局部属性用来访问 directive 外部环境定义的字符串值，主要是通过 directive 所在的标签属性绑定外部字符串值。这种绑定是单向的，即父 scope 的绑定变化，directive 中的 scope 的属性会同步变化，而隔离 scope 中的绑定变化，父 scope 是不知道的。

如下示例：directive 声明未隔离 scope 类型，并且使用@绑定 name 属性，在 directive 中使用 name 属性绑定父 scope 中的属性。当改变父 scope 中属性的值的时候，directive 会同步更新值，当改变 directive 的 scope 的属性值时，父 scope 无法同步更新值。

js 代码：

lt;!DOCTYPE htmlgt; 
lt;html lang="zh" ng-app="myApp"gt; 
lt;headgt; 
 lt;meta charset="UTF-8"gt; 
 lt;titlegt;AngularJS入门学习lt;/titlegt; 
 lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; 
lt;/headgt; 
lt;bodygt; 
lt;div ng-controller="myController"gt; 
 lt;div class="result"gt; 
 lt;divgt;父scope： 
 lt;divgt;Say：{{name}}lt;brgt;改变父scope的name：lt;input type="text" value="" ng-model="name"/gt;lt;/divgt; 
 lt;/divgt; 
 lt;divgt;隔离scope： 
 lt;div isolated-directive name="{{name}}"gt;lt;/divgt; 
 lt;/divgt; 
 lt;divgt;隔离scope（不使用父scope {{name}}）： 
 lt;div isolated-directive name="name"gt;lt;/divgt; 
 lt;/divgt; 
 lt;/divgt; 
lt;/bodygt; 
lt;script type="text/javascript"gt; 
var app = angular.module('myApp', []); 
 app.controller("myController", function ($scope) { 
 $scope.name = "hello world"; 
 }).directive("isolatedDirective", function () { 
 return { 
 scope: { 
 name: "@" 
 }, 
 template: 'Say：{{name}} lt;brgt;改变隔离scope的name：lt;input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid"gt;' 
 }; 
}); 
lt;/scriptgt; 
lt;/htmlgt; 

结果：页面初始效果

动画效果：

可以看到父scope上的内容发生改变，子scope同时发生改变。而子scope上的内容发生改变。不影响父scope上的内容！

= 局部 scope 属性

= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。
意思是，当你想要一个双向绑定的属性的时候，你可以使用=来引入外部属性。无论是改变父 scope 还是隔离 scope 里的属性，父 scope 和隔离 scope 都会同时更新属性值，因为它们是双向绑定的关系。

示例代码：

lt;!DOCTYPE htmlgt; 
lt;html lang="zh" ng-app="myApp"gt; 
lt;headgt; 
 lt;meta charset="UTF-8"gt; 
 lt;titlegt;AngularJS入门学习lt;/titlegt; 
 lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; 
lt;/headgt; 
lt;bodygt; 
lt;div ng-controller="myController"gt; 
 lt;divgt;父scope： 
 lt;divgt;Say：{{user.name}}lt;brgt;改变父scope的name：lt;input type="text" value="" ng-model="userBase.name"/gt;lt;/divgt; 
 lt;/divgt; 
 lt;divgt;隔离scope： 
 lt;div isolated-directive user="userBase"gt;lt;/divgt; 
 lt;/divgt; 
lt;/divgt; 
lt;/bodygt; 
lt;script type="text/javascript"gt; 
var app = angular.module('myApp', []); 
 app.controller("myController", function ($scope) { 
 $scope.userBase = { 
 name: 'hello', 
 id: 1 
 }; 
 }).directive("isolatedDirective", function () { 
 return { 
 scope: { 
 user: "=" 
 }, 
 template: 'Say：{{user.name}} lt;brgt;改变隔离scope的name：lt;input type="buttom" value="" ng-model="user.name"/gt;' 
 } 
 }) 
lt;/scriptgt; 
lt;/htmlgt; 

效果：

可以看到父scope和子scope上的内容一直都是一样的！
局部 scope 属性

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!