HTML5技术

AngularJs之Scope作用域 - webNick(2)

字号+ 作者:H5之家 来源:H5之家 2016-11-02 18:00 我要评论( )

独立作用域最大的特点是不会原型继承其父作用域,对外界的父作用域保持相对的独立。因此,如果在定义了孤立作用域的 AngularJS directive 中想要访问其父作用域的属性,则得到的值为 undefined。代码如下: 示例六

  独立作用域最大的特点是不会原型继承其父作用域,对外界的父作用域保持相对的独立。因此,如果在定义了孤立作用域的 AngularJS directive 中想要访问其父作用域的属性,则得到的值为 undefined。代码如下:

示例六:独立作用域的隔离性

scope nick angular.module(, []) .controller(($scope) { $scope.args = {}; }]) .directive( () { return { scope : {}, link : function($scope, $element, $attr) { console.log($scope.$args); //输出 undefined } }; });

  上面的代码中通过在 directive 中声明了 scope 属性从而创建了一个作用域,其父作用域为 ctrl 所属的作用域。但是,这个作用域是孤立的,因此,它访问不到父作用域的中的任何属性。存在这样设计机制的好处是:能够创建出一些列可复用的 directive,这些 directive 不会相互在拥有的属性值上产生串扰,也不会产生任何副作用。

AngularJS 独立作用域的数据绑定

  在继承作用域中,我们可以选择子作用域直接操作父作用域数据来实现父子作用域的通信,而在独立作用域中,子作用域不能直接访问和修改父作用域的属性和值。为了能够使孤立作用域也能和外界通信,AngularJS 提供了三种方式用来打破独立作用域“孤立”这一限制。

单向绑定(@ 或者 @attr)

  这是 AngularJS 独立作用域与外界父作用域进行数据通信中最简单的一种,绑定的对象只能是父作用域中的字符串值,并且为单向只读引用,无法对父作用域中的字符串值进行修改,此外,这个字符串还必须在父作用域的 HTML 节点中以 attr(属性)的方式声明。

  使用这种绑定方式时,需要在 directive 的 scope 属性中明确指定引用父作用域中的 HTML 字符串属性,否则会抛异常。示例代码如下:

实例七: 单向绑定示例

scope nick angular.module(, []) .directive( () { return { replace : true, template: , scope : { isolates : , }, link : function($scope, $element, $attr) { $scope.isolates } }; }) .controller( ($scope) { $scope.btns ; }); {{btns}}

  上面的代码,通过在 directive 中声明了 scope:{isolates:'@'} 使得 directive 拥有了父作用域中 data-isolates (isolates为自定义属性,不加data也可以,但建议加上data)这个 HTML 属性所拥有的值,这个值在控制器 ctrl 中被赋值为'nick'。所以,代码的运行结果是页面上有两个名为 nick的按钮。

  我们还注意到 link 函数中对 isolates 进行了修改,但是最终不会在运行结果中体现。这是因为 isolates 始终绑定为父作用域中的 btns 字符串,如果父作用域中的 btns 不改变,那么在孤立作用域中无论怎么修改 isolates 都不会起作用。

引用绑定(&或者&attr)

  通过这种形式的绑定,孤立作用域将有能力访问到父作用域中的函数对象,从而能够执行父作用域中的函数来获取某些结果。这种方式的绑定跟单向绑定一样,只能以只读的方式访问父作用函数,并且这个函数的定义必须写在父作用域 HTML 中的 attr(属性)节点上。

  这种方式的绑定虽然无法修改父作用域的 attr 所设定的函数对象,但是却可以通过执行函数来改变父作用域中某些属性的值,来达到一些预期的效果。示例代码如下:

示例八:引用绑定示例

scope nick angular.module(, []) .directive( () { return { replace : true, scope : { isolates : , }, link : function($scope, $element, $attr) { $scope.isolates(); func(); } }; }) .controller( ($scope) { $scope.func = function () { console.log(); } });

  这个例子中,浏览器的控制台将会打印“Nick DeveloperWorks”文字。

  上面的代码中我们在父作用域中指定了一个函数对象$scope.func,在孤立作用域中通过对 HTML 属性的绑定从而引用了 func。需要注意的是 link 函数中对 func 对象的使用方法,$scope.isolates 获得的仅仅是函数对象,而不是调用这个对象,因此我们需要在调用完$scope.isolates 之后再调用这个函数,才能得到真正的执行结果。

双向绑定(=或者=attr)

双向绑定赋予 AngularJS 孤立作用域与外界最为自由的双向数据通信功能。在双向绑定模式下,孤立作用域能够直接读写父作用域中的属性和数据。和以上两种孤立作用域定义数据绑定一样,双向绑定也必须在父作用域的 HTML 中设定属性节点来绑定。

双向绑定非常适用于一些子 directive 需要频繁和父作用域进行数据交互,并且数据比较复杂的场景。不过,由于可以自由的读写父作用域中的属性和对象,所以在一些多个 directive 共享父作用域数据的场景下需要小心使用,很容易引起数据上的混乱。

示例代码如下:

示例九:双向绑定示例

scope nick angular.module(, []) .directive( () { return { replace : true, template: , scope : { isolates : , }, link : function($scope, $element, $attr) { $scope.isolates.name ; } }; }) .controller( ($scope) { $scope.btns = { name : , dw : }; }); {{btns.dw}}{{btns.name}}

  上面的代码运行的结果是浏览器页面上出现三个按钮,其中第一个按钮标题为“DeveloperWorks”,第二和第三个按钮的标题为“NICK”。

初始时父作用域中的$scope.btns.name为小写的“nick”,通过双向绑定,孤立作用域中将父作用域的 name改写成为大写的“NICK”并且直接生效,父作用域的值被更改。

  推荐:这篇关于作用域的文章也写的不错,可以看看!

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 深究angularJS系列 - 第二弹 - 雨夜羽翼

    深究angularJS系列 - 第二弹 - 雨夜羽翼

    2016-10-29 10:00

  • 深究angularJS系列 - 初识 - 雨夜羽翼

    深究angularJS系列 - 初识 - 雨夜羽翼

    2016-10-27 11:00

  • 基于AngularJS的个推前端云组件探秘 - 喵神

    基于AngularJS的个推前端云组件探秘 - 喵神

    2016-10-26 12:00

  • 那些年我们一起过的JS闭包,作用域,this,让我们一起划上完美的句号。 - 追梦子

    那些年我们一起过的JS闭包,作用域,this,让我们一起划上完美的句号

    2016-08-19 18:00

网友点评