什么是隔离 Scope

AngularJS 的 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 属性值。

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', function () {
    return {
        scope: {},
        template: 'Name: {{user.name}} Street: {{user.addr}}'
    };
});

现在 scope 是隔离的,user 对象将无法从父 scope 中访问,因此,在 directive 渲染的时候 user 对象的占位将不会输出内容。

隔离 scope 和父 scope 如何交互

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 代码:

 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 属性名之间建立双向绑定。
意思是,当你想要一个双向绑定的属性的时候,你可以使用=来引入外部属性。无论是改变父 scope 还是隔离 scope 里的属性,父 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,当用户点击按钮时,directive 想要通知 controller,controller 无法知道
directive 中发生了什么,也许你可以通过使用 angular 中的 event 广播来做到,但是必须要在 controller
中增加一个事件监听方法。
最好的方法就是让 directive 可以通过一个父 scope 中的 function,当 directive 中有什么动作需要更新到父 scope 中的时候,可以在父 scope 上下文中执行一段代码或者一个函数。

如下示例在 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 中改变外部环境中的值,或者执行函数的重重困境了。
更多请参考API文档:https://docs.angularjs.org/api/ng/service/$compile

AngularJS Directive 隔离 Scope 数据交互的更多相关文章

  1. AngularJs $resource 高大上的数据交互

    $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...

  2. angularJs中自定义directive的数据交互

    首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...

  3. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. angularjs向后台传递数据,与后端进行交互

    angularjs之数据交互 function loadLeftFirstNodes (){ $http.get(sourceUrl,{ params:{ mpId: mpId, visits: ce ...

  5. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  6. [译]angularjs directive design made easy

    原文: http://seanhess.github.io/2013/10/14/angularjs-directive-design.html AngularJS directives很酷 Angu ...

  7. 理解AngularJS的作用域Scope

    AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...

  8. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

  9. angularjs directive 实例 详解

    前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...

随机推荐

  1. Echarts3 关系图-力导向布局图

    因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...

  2. objective-c 语法快速过(4)

    oc 里的字符串 字符串的快速创建(最简单的方法) NSStirng *str = @“Hello”;//oc的字符串都是@“”形式的 oc的字符串也是类的对象,是NSString类的对象,创建没有那 ...

  3. jinfo_动态调整JVM参数(无需重启)(实践)

    ​本文演示在JVM进程运行过程中动态开启/关闭 GC输出,无需重启JVM进程 jinfo使用介绍 可以用来查看正在运行的Java应用程序的扩展参数,甚至支持在运行时,修改部分参数 -flag < ...

  4. Java程序的编码规范

    所有的程序开发手册都包含了各种规则.一些习惯自由程序人员可能对这些规则很不适应,但是在多个开发人员共同写作的情况下,这些规则是必需的.这不仅仅是为了开发效率来考虑,而且也是为了后期维护考虑. 一.命名 ...

  5. Apache Commons 系列简介 之 Pool

    一.概述 Apache Commons Pool库提供了一整套用于实现对象池化的API,以及若干种各具特色的对象池实现.2.0版本,并非是对1.x的简单升级,而是一个完全重写的对象池的实现,显著的提升 ...

  6. 说说设计模式~门面模式(Facade)

    返回目录 门面模式(Facade)属于结构型模式的一种,它符合面向对象的封装原则,但又不符合开闭原则,呵呵,今天我们主要说它的优点,不谈缺点. 定义 门面模式,是指提供一个统一的接口去访问多个子系统的 ...

  7. 18.实现如下类之间的继承关系,并编写Music类来测试这些类。

    package zhongqiuzuoye; public class Instrument { public void play() { System.out.println("弹奏乐器& ...

  8. x01.Game.LitSkull: 梯次防御

    1.人要有点精神 人要有点精神,否则,不是沦落为毫无意义的看客,就是退化成食色性也的动物,有被开除球籍的危险,如晚清. 2.框架 引号头文件在当前目录下搜寻,三角头文件在配置目录下搜寻,这是一个简单的 ...

  9. floyd算法 poj2253

    #include<iostream> #include<algorithm> #include<cmath> #include<cstdio> usin ...

  10. java 使用POI批量导入excel数据

    一.定义 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 二.所需jar包: 三.简单的一个读取e ...