AngularJS Directive 隔离 Scope 数据交互
什么是隔离 ScopeAngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能。当你需要创建一个可重复使用的 directive,只是偶尔需要访问或者修改父 scope 的数据,就需要使用隔离 scope。当使用隔离 scope 的时候,directive 会创建一个没有依赖父 scope 的 scope,并提供一些访问父 scope 的方式。 为什么使用隔离 Scope当你想要写一个可重复使用的 directive,不能再依赖父 scope,这时候就需要使用隔离 scope 代替。共享 scope 可以直接共享父 scope,而隔离 scope 无法共享父scope。下图解释共享 scope 和隔离 scope 的区别: 示例可看: 共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性。因此下面示例可以将那么属性的值输出出来。使用的是父 scope 中定义的值。 js代码: app.controller("myController",function ($scope) { $scope.name = "hello world"; }).directive("shareDirective",function () { return { template: 'Say:{{name}}' } }); html代码 <div ng-controller="myController"> <div share-directive=""></div> </div> 输出结果: Say:hello world 隔离 scope 使用隔离 scope 的时候,无法从父 scope 中共享属性。因此下面示例无法输出父 scope 中定义的 name 属性值。 $scope.name = "hello world"; }).directive("isolatedDirective",function () { return { scope: {}, template: 'Say:{{name}}' } }); html代码: "myController">
<div isolated-directive=Say:
示例请点击:http://kin-sample.coding.io/angular/directive/share-and-isolated-scope.html 从上图可以看出共享 scope 允许从父 scope 渗入到 directive 中,而隔离 scope 不能,在隔离 scope 下,给 directive 创造了一堵墙,使得父 scope 无法渗入到 directive 中。 具体文档可以参考:https://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive 如何在 directive 中创建隔离 scope在 Directive 中创建隔离 scope 很简单,只需要定义一个 scope 属性即可,这样,这个 directive 的 scope 将会创建一个新的 scope,如果多个 directive 定义在同一个元素上,只会创建一个新的 scope。 angular.module('app').controller("myController",function ($scope) { $scope.user = { id:1, name:"hello world" }; }).directive('isolatedScope', template: 'Name: {{user.name}} Street: {{user.addr}}' }; }); 现在 scope 是隔离的,user 对象将无法从父 scope 中访问,因此,在 directive 渲染的时候 user 对象的占位将不会输出内容。 隔离 scope 和父 scope 如何交互directive 在使用隔离 scope 的时候,提供了三种方法同隔离之外的地方交互。这三种分别是
@ 局部 scope 属性 @ 方式局部属性用来访问 directive 外部环境定义的字符串值,主要是通过 directive 所在的标签属性绑定外部字符串值。这种绑定是单向的,即父 scope 的绑定变化,directive 中的 scope 的属性会同步变化,而隔离 scope 中的绑定变化,父 scope 是不知道的。 如下示例:directive 声明未隔离 scope 类型,并且使用@绑定 name 属性,在 directive 中使用 name 属性绑定父 scope 中的属性。当改变父 scope 中属性的值的时候,directive 会同步更新值,当改变 directive 的 scope 的属性值时,父 scope 无法同步更新值。 js 代码: $scope.name = "hello world"; }).directive("isolatedDirective",function () { return { scope: { name: "@" }, template: 'Say:{{name}} <br>改变隔离scope的name:<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">' } }) html 代码: "myController"> <div class="result"> <div>父scope: <div>Say:{{name}}<br>改变父scope的name:<input type="text" value="" ng-model="name"/></div> </div> <div>隔离scope: <div isolated-directive name="{{name}}"></div> </div> <div>隔离scope(不使用{{name}}): <div isolated-directive name="name"></div> </div> </div> 具体演示请看:http://kin-sample.coding.io/angular/directive/isolated-scope-at-interact.html = 局部 scope 属性 = 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。 示例代码: $scope.user = { name: 'hello', id: 1 }; }).directive("isolatedDirective",function () { return { scope: { user: "=" }, template: 'Say:{{user.name}} <br>改变隔离scope的name:<input type="buttom" value="" ng-model="user.name"/>' } }) "myController"> <div>父scope: <div>Say:{{user.name}}<br>改变父scope的name:<input type="text" value="" ng-model="user.name"/></div> </div> <div>隔离scope: <div isolated-directive user="user"></div> </div> <div>隔离scope(使用{{name}}): <div isolated-directive user="{{user}}"></div> </div> </div> 具体演示请看:http://kin-sample.coding.io/angular/directive/isolated-scope-eq-interact.html & 局部 scope 属性 & 方式提供一种途经是 directive 能在父 scope 的上下文中执行一个表达式。此表达式可以是一个 function。 如下示例在 directive 中执行父 scope 的 function。 $scope.value = "hello world"; $scope.click = function () { $scope.value = Math.random(); }; }).directive("isolatedDirective",function () { return { scope: { action: "&" }, template: '<input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/>' } }) "myController"> <div>父scope: <div>Say:{{value}}</div> </div> <div>隔离scope: <div isolated-directive action="click()"></div> </div> </div> 具体演示请看:http://kin-sample.coding.io/angular/directive/isolated-scope-ad-interact.html 使用小结 在了解 directive 的隔离 scope 跟外部环境交互的三种方式之后,写一些通用性的组件更加便捷和顺手。不再担心在 directive 中改变外部环境中的值,或者执行函数的重重困境了。 转自:https://blog.coding.net/blog/angularjs-directive-isolate-scope?type=early (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |