angular 指令作用域 scope
转载自:https://segmentfault.com/a/1190000002773689
下面我们就来详细分析一下指令的作用域。 在这之前希望你对AngularJS的Directive有一定的了解,不然你对下面部分的理解可能会有一点难度。
步入正题:
每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的
scope
参数提供了三种选择,分别是:false
,true
,{}
;默认情况下是false
。
scope = false
首先我们来看一下,当scope
参数被设置为false
时有什么情况发生
在这种情况下,在指令模板中可以直接使用父作用域中的变量,函数
首先我们来创建一个指令,代码如下所示:
JS代码:
angular.module("MyApp", [])
.controller("MyController", function ($scope) {
//J1 这里我们在作用域里初始化两个变量
$scope.name = "dreamapple";
$scope.age = 20;
//J2 创建一个方法,修改我们创建的对象的年龄
$scope.changeAge = function () {
$scope.age = 22;
}
})
//J3 创建我们的指令,指令名字为"myDirective"
.directive("myDirective", function () {
var obj = {
//J4 指令的声明模式为 "AE" 属性和元素
restrict: "AE",
//J5 指令继承父作用域的属性和方法
scope: false,
replace: true,
template: "<div class='my-directive'>" +
"<h3>下面部分是我们创建的指令生成的</h3>" +
"我的名字是:<span ng-bind='name'></span><br/>" +
"我的年龄是:<span ng-bind='age'></span>" +
"<input type='text' ng-model='name'>"+
" </div>"
}
return obj;
});
HTML代码:
<div ng-app="MyApp">
<div class="container" ng-controller="MyController">
<div class="my-info">我的名字是:<span ng-bind="name"></span>
<!-- 使用"ng-bind"防止网络状态不佳时出现没有被赋值表达式 -->
<br/>我的年龄是:<span ng-bind="age"></span>
</div>
<!-- 使用属性声明指令 -->
<div class="my-directive" my-directive></div>
</div>
</div>
CSS代码:
div{
padding: 6px;
}
div.container {
border: 1px solid black;
}
div.my-info {
border: 1px solid blue;
}
div.my-directive{
border: 1px solid green;
}
下面我们来详细解释一下上面的代码:
因为我们将
scope
的属性设置为false
所以,我们创建的指令继承了父作用域的一切属性和方法,这也使得在指令的模板中我们可以使用这些属性和方法。
注意:此时我们在输入框里改变名字,会发现上面的两个名字都发生了变化,你肯定会说,这肯定是这样啊,数据绑定嘛,好,我们接着往下走。
scope = true
当把scope
属性设置为true
时,这表明我们创建的指令要创建一个新的作用域,这个作用域继承自我们的父作用域。
等等,刚才我们不是说了,当把scope
属性值设置为false
时,不也是继承我们的父作用域吗?表急,我们接着往下看。
修改上面的JS代码,将指令中的:
scope:false
修改为scope:true
然后我们再试着在我们的input
输入框中写一些字符串,会发现,指令中的那个name
发生了变化,但是指令外的那个name
却没有发生变化,这说明了一个问题。
- 当我们将
scope
设置为true
的时候,我们就新创建了一个作用域,只不过这个作用域是继承了我们的父作用域;我觉得可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。- 当我们将
scope
设置为false
的时候,我们创建的指令和父作用域(其实是同一个作用域)共享同一个model
模型,所以在指令中修改模型数据,它会反映到父作用域的模型中。
Online Code Part2
scope = {}
下面我们要进入一个好玩的部分,当我们将scope
的属性设置为{}
时,我们可以做更多的事情。
AngularJS最强的大的地方之一就是它可以构建组建,无论放在哪里都是可以使用的;
这所以可以做到这些,不得不归功于指令的这个属性;当我们将scope
设置为{}
时,意味着我们创建的一个新的与父作用域隔离的新的作用域,这使我们在不知道外部环境的情况下,就可以正常工作,不依赖外部环境。
当然首先我们还是要给出我们的例子,先看代码,我们修改了上述的JS代码和HTML代码
JS代码:
angular.module("MyApp", [])
.controller("MyController", function ($scope) {
$scope.name = "dreamapple";
$scope.age = 20;
$scope.changeAge = function(){
$scope.age = 0;
}
})
.directive("myDirective", function () {
var obj = {
restrict: "AE",
scope: {
name: '@myName',
age: '=',
changeAge: '&changeMyAge'
},
replace: true,
template: "<div class='my-directive'>" +
"<h3>下面部分是我们创建的指令生成的</h3>" +
"我的名字是:<span ng-bind='name'></span><br/>" +
"我的年龄是:<span ng-bind='age'></span><br/>" +
"在这里修改名字:<input type='text' ng-model='name'><br/>" +
"<button ng-click='changeAge()'>修改年龄</button>" +
" </div>"
}
return obj;
});
HTML代码:
<div ng-app="MyApp">
<div class="container" ng-controller="MyController">
<div class="my-info">我的名字是:<span ng-bind="name"></span>
<br/>我的年龄是:<span ng-bind="age"></span>
<br />
</div>
<div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div>
</div>
</div>
我们使用了隔离的作用域,不代表我们不可以使用父作用域的属性和方法。
- 我们可以通过向
scope
的{}
中传入特殊的前缀标识符(即prefix
),来进行数据的绑定。 - 在创建了隔离的作用域,我们可以通过
@
,&
,=
引用应用指令的元素的属性,如上面的代码那样,我们可以在<div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div>
这个元素中,利用前缀标识符通过使用属性my-name
,age
,change-my-age
来引用这些属性的值。
下面我们来看看如何使用这些前缀标识符:
@
这是一个单项绑定的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive my-name="{{name}}"></div>
,注意,属性的名字要用-
将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}
来绑定数据。
=
这是一个双向数据绑定前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive age="age"></div>
,注意,数据的双向绑定要通过=
前缀标识符实现,所以不可以使用{{}}
。
&
这是一个绑定函数方法的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive change-my-age="changeAge()"></div>
,注意,属性的名字要用-
将多个个单词连接。
注意:在新创建指令的作用域对象中,使用属性的名字进行绑定时,要使用驼峰命名标准,比如下面的代码。
scope: {
// `myName` 就是原来元素中的`my-name`属性
name: '@myName',
age: '=',
// `changeMyAge`就是原来元素中的`change-my-age`属性
changeAge: '&changeMyAge'
}
进一步说明,我们的指令是如何利用这些前缀标识符来寻找我们想要的属性或者函数的?
@
当指令编译到模板的name
时,就会到scope
中寻找是否含有name
的键值对,如果存在,就像上面那样,看到@
就知道这是一个单向的数据绑定,然后寻找原来的那个使用指令的元素上(或者是指令元素本身)含有这个值的属性即my-name={{name}}
,然后在父作用域查找{{name}}
的值,得到之后传递给模板中的name
。=
和&
与@
差不多,只不过=
进行的是双向的数据绑定,不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变,而&
是绑定函数而已。
angular 指令作用域 scope的更多相关文章
- 【转】angular指令入坑
独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性 ...
- 一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好
学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是 ...
- angular学习笔记(三十)-指令(8)-scope
本篇讲解指令的scope属性: scope属性值可以有三种: 一.scope:false 默认值,这种情况下,指令的作用域就是指令元素当前所在的作用域. 二.scope:true 创建一个继承了父作用 ...
- AngularJS 指令的 Scope (作用域)
参考:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的 ...
- angularJs指令的Scope(作用域)
每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然Angular ...
- AngularJS之一个元素上绑定多个指令作用域
前言 众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false). 且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下: 指令之sc ...
- 理解AngularJS的作用域Scope
AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...
- angular 指令@、=、&的用法和区别
1.指令作用域中的@ 作用是把当前属性作为字符串传递. html: <div ng-controller="MyCtrl"> <drink water=" ...
- angular 指令 要点解析
指令可以删繁就简前端的js代码,杜绝重复的js代码和html代码. 下面就对指令的重要属性进行罗列 一.restrict = 'AECM' 分别指该指令标识位于 attribute属性: < ...
随机推荐
- 关闭显示器API及命令
window下命令powercfg /change "Home/Office Desk" /moniter-timeout-ac 1C#中实现[DllImportAttribute ...
- F:ungeon Master
总时间限制: 1000ms 内存限制: 65536kB描述You are trapped in a 3D dungeon and need to find the quickest way out! ...
- Javascript学习笔记3 Javascript与BOM简介
什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...
- python中enumerate()的用法
先出一个题目:1.有一 list= [1, 2, 3, 4, 5, 6] 请打印输出:0, 1 1, 2 2, 3 3, 4 4, 5 5, 6 打印输出, 2.将 list 倒序成 [6, 5, ...
- 通过JS检测360浏览器
如何通过JS检测360浏览器? 尝试了一大堆方法,网上大多数办法都是通过navigator.userAgent来判断,这可能在几年前是行得通的,现在360userAgent输出来跟谷歌除了版本号其余一 ...
- Windows 下 pdf2word 的可用软件记录
因为用 latex 写的原稿,提交审阅的时候有 Word 版本的要求,只好找软件来转换.折腾了一整天的 Linux 下latex2html, latex2rtf 等两个曲线救国的方式来生成 Word ...
- ubuntu 终端快捷键
快捷键 功能Tab 自动补全Ctrl+a 光标移动到开始位置Ctrl+e 光标移动到最末尾Ctrl+k 删除此处至末尾的所有内容Ctrl+u 删除此处至开始的所有内容Ctrl+d 删除当前字符Ctrl ...
- CentOS 7 64位的安装流程
若出现以下不支持虚拟机的问题: 表示虚拟机检测到CPU支不支持虚拟化,要去BIOS里设置虚拟化技术设置为enabled:重启电脑-按"F1或Fn+F1"-进入BIOS主界面-移至S ...
- 理解js中__proto__和prototype的区别和关系
首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性__proto ...
- 几种排序算法的学习,利用Python和C实现
之前学过的都忘了,也没好好做过总结,现在总结一下. 时间复杂度和空间复杂度的概念: 1.空间复杂度:是程序运行所以需要的额外消耗存储空间,一般的递归算法就要有o(n)的空间复杂度了,简单说就是递归集算 ...