指令的理解-作用域范围

最近学习了一下angularjs的指令作用域scope的属性,掌握了指令 你就掌握了angularjs核心,一般我们在书写一个指令的时候,如果不写scope,默认的是指令和Controller之间可以互相访问通信,这个是最简单的,也是最危险的,因为虽然在编程上方便了,但是指令的 某些属性很容易被外部修改,因为指令一般是需要在多个地方复用的,所以为了保证写出可以高效封闭重复利用率高的指令必须要用到scope:

scope:false (指令的作用域继承父级作用域[parent]的,指令和Controller之间互相通信,可以随意传值更新)

scope:true(指令的作用域继承父级作用域[parent]的,同时创建了自己新的子作用域,并且指令和Controller之间不能互相通信)

scope:{ } (指令的作用域没有继承父级作用域,创建了自己的新作用域,如需与父级作用域通信,可以采取以下方式)

scope: {
          text: "@myText",
          myValue: "&myAttribute",
          twoWayBind: "=myTwoWayBind",
          oneWayBind: "&myOneWayBind"
       }

1. Text Binding

文本绑定用@引用,不管你传的什么值,他们总是被解析并返回字符串,也就是说什么变量值在{{}}里就返回什么值,比如:

<my-directive my-attribute="hello {{ userName }}" />

在controller里 赋值:

$scope.username = "Umur"

在指令作用域内,这个值将显示 “hello Umur” , 这个值会在每个周期更新.

2. One-way Binding

单向绑定是用前缀 & , 可以是任何类型。在指令范围内将被定义为getter函数,解释如下:

Controller:

/* more code */
$scope.someObject = { name:‘Umur‘, id:1 };
/* more code */

  

HTML:

<my-directive my-attribute="someObject" />

  

Directive:

{
  scope: {myValue: "&myAttribute"},
  link: function (scope, iElm, iAttrs) {
    var x = scope.myValue();
    // x == {name:"Umur", id:1}
  }
}

因为他们是getter函数,所以是只读的,对他们做的任何修改都不能传播到父级作用域或更高的作用域。

3. Two-way Bindings

双向绑定用符号 "= "标记,这个才像真正意义上的绑定,对绑定值的任何修改将反映在任何作用域。 用例子说明如下:

Controller:

/* more code */
$scope.someObject = { name:‘Umur‘, id:1 };
/* more code */

  

HTML:

<my-directive my-attribute="someObject" />

  

Directive:

{
  scope: {myValue: "=myAtrribute" },
  link: function (scope, iElm, iAttrs) {
    var x = scope.myValue.name;
    // x == "Umur";
    scope.myValue.name = "Kieslowski";
    // if we go to parent scope (controller‘s scope, in this example)
    // $scope.someObject.name == "Kieslowski";
    // would be true
  }
}

  

更详细的例子和说明请参考:https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/

时间: 2024-10-31 03:16:13

指令的理解-作用域范围的相关文章

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

angularJs指令的Scope(作用域)

每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 1.scope = false JS 代码: html 代码: result: 修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性. 2. scope=true

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域)【转】

学习了AngularJS好长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 当初看的是<AngularJS权威指南>这本书,但是感觉这本书关于这方面讲的不是很细致,另外吐槽一下,这本书中文版印刷的质量不是很好,很多地方都有错误:不过讲的还是可以的,是一本学习AngularJS的好书. 下面我们就来详细分析一下指令的作用域.在这之前希望你对AngularJS的Directive有一定的了解,不然你对下面部分的理解可能会有一点难度.

AngularJS 指令的 Scope (作用域)

指令被创建AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 1.scope = false,在这种情况下,在指令模板中可以直接使用父作用域中的变量,创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中. 2.scope = true,当把scope属性设置为true时,这表明我们创建的指令要创建一个新的作用域,这个作用域继承自我们的父作用域,它和父作用域不是

关于Angular 指令的理解

之前虽然一直都在用这套框架,但是对于指令还是知之甚少,感觉是蛮复杂的东西.看了之后也没有真正理解. 最近在做一个Angular的小项目,卡在了Angular的生命周期和自定义指令上.纠结了好几天,终于今天在地铁上灵光一闪想通了.所以赶紧把它记下来,免得后面忘记了. 我们一直都说angular的加载流程是先载入HTML片段,其中在加载<script>标签的时候加载了所有的JS库,包括我们自己写的所有的controller/service/filter以及官方的angular库. 加载完angul

深入理解作用域链

作用域链是JavaScript中的一个非常重要的概念,想要理解什么是作用域链,就必须知道什么是作用域. 作用域: 1.全局作用域: (1)最外层函数和在最外层函数定义的变量,拥有全局的作用域.js中一切皆对象,函数也是对象,js最外层的对象是window.所以在window下定义的函数和未被这些函数包裹的变量,就拥有全局作用域,这些变量能够在其他任何作用域下使用. (2)所有window对象下的内置属性属于全局变量:如window.document,window.navigator等. (3)没

理解作用域

四月份了,天气逐渐暖和些,可是昨天突然下起了暴雨,早上来到工作室,鞋湿透了,衣服湿了,书包下面也完全湿透,导致电脑进了点水幸好可以正常使用,只不过书也湿了,让我很是心痛....但我真的是打着伞过来,只怪大连的风从四面八方袭来!!让我无从下手~ 可是,可是......这样的结局竟然来自一场人工降雨... 虽是大雨天,但也需要看书,今天让我们来理解一下作用域吧! 二话不说,先上代码. 1.全局作用域 var global = "global"; for(var i = 0; i <8

js基础梳理-如何理解作用域和作用域链?

本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关于作用域的定义,只是在"4.2执行环境及作用域"中简单说了下执行环境(execution context)的概念.而执行环境其实就是之前博客:js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?中的执行上下文. 而在<JavaScript权威指南>中,对作

野兽的Angular Api 学习、翻译及理解 - - $compile编译服务与指令

野兽的ng api学习 -- $compile $compile 这是个编译服务.编译一段HTML字符串或者DOM的模板, 产生一个将scope和模板连接到一起的函数. 编译服务主要是和指令为指令服务,下面的文章也是主要介绍指令的. 下面是一个被声明的带指令定义对象的指令的示例: var myModule = angular.module(...); myModule.directive('directiveName', [“injectables”,…,function factory(inj