AngularJS Directive 隔离 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 属性值。 js代码: app.controller("myController",function ($scope) {
$scope.name = "hello world";
}).directive("isolatedDirective",function () {
return {
scope: {},
template: 'Say:{{name}}'
}
});
html代码: <div ng-controller="myController">
<div isolated-directive=""></div>
</div>
输出结果: 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 如何交互
@ 局部 scope 属性 @ 方式局部属性用来访问 directive 外部环境定义的字符串值,主要是通过 directive 所在的标签属性绑定外部字符串值。这种绑定是单向的,即父 scope 的绑定变化,directive 中的 scope 的属性会同步变化,而隔离 scope 中的绑定变化,父 scope 是不知道的。 如下示例:directive 声明未隔离 scope 类型,并且使用@绑定 name 属性,在 directive 中使用 name 属性绑定父 scope 中的属性。当改变父 scope 中属性的值的时候,directive 会同步更新值,当改变 directive 的 scope 的属性值时,父 scope 无法同步更新值。 js 代码: app.controller("myController",function ($scope) {
$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 代码: <div ng-controller="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 属性名之间建立双向绑定。 示例代码: js 代码: app.controller("myController",function ($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"/>'
}
})
html 代码: <div ng-controller="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。 js代码: app.controller("myController",function ($scope) {
$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()"/>'
}
})
html 代码: <div ng-controller="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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |