详解Angular.js指令中scope类型的几种特殊情况
2017-02-21 08:44
771 查看
大家都知道在默认情况下,指令应该访问父作用域.如果我们对指令暴露了父控制器的scope,那么指令就可以自由的修改scope属性.在一些情况下,你的指令可能想要添加一些只有内部可以使用的属性和函数,如果我们都在父作用域中完成,可能会污染了父作用域,因此,我们有以下两种选择:
使用父作用域-如果不需要操作父作用域属性,不需要一个新的作用域,可以直接使用父作用域
scope:false
一个子作用域-这个作用域会原型继承父作用域
scope:true
一个隔离的作用域-一个全新的、不继承、独立存在的作用域
scope:{}
作用域可以由指令定义对象中的scope属性定义,下面是关于scope属性的一些说明:
指令中的scope常见的类型
=
- '=',用于子作用域与父作用域双向绑定.使用这种方法可以将一个实际的作用域模型赋值给一个属性,而不是一个普通的字符串.效果是你可以传递复杂的数据模型,例如数组/对象等到隔离作用域.父作用域或者子作用域属性发生了改变,会相应影响对方.
- '=?',这种情况可以避免父作用域属性中不存在当前属性情况,避免抛出异常.--'If the parent scope property doesn't exist, it will throw a NON_ASSIGNABLE_MODEL_EXPRESSION exception. You can avoid this behavior using `=?` or `=?attr` in order to flag the property as optional.'
- '=*',If you want to shallow watch for changes (i.e. $watchCollection instead of $watch) you can use `=*` or `=*attr` (`=*?` or `=*?attr` if the property is optional).
&
- '&',用于执行父作用域中的函数.
@
- '@',进行单项文本绑定.使用这种方法可以将字符串传递到属性,当父作用域属性发生变化时,隔离作用域模型也发生变化.然而,反之则不成立!你不能通过操纵隔离作用域来改变父作用域.
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
- Angular1.x自定义指令实例详解
- Angular之指令Directive用法详解
- Angular.js自定义指令学习笔记实例
- angular分页指令操作
- AngularJS内置指令
- AngularJS学习笔记之基本指令(init、repeat)
- AngularJS中的指令全面解析(必看)
- 用AngularJS的指令实现tabs切换效果
- 深入讲解AngularJS中的自定义指令的使用
- Angularjs编写KindEditor,UEidtor,jQuery指令
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
- Angular1.x复杂指令实例详解
相关文章推荐
- Js事件详解(1)事件类型及几种添加事件处理程序的方法
- AngularJS ng-bind-template 指令详解
- angularjs $scope.$apply 方法详解
- AngularJS ng-app 指令实例详解
- Angular.JS中指令的命名规则详解
- angular.js指令中transclude选项及ng-transclude指令详解
- AngularJS ng-blur 指令详解及简单实例
- Angular.js之作用域scope'@','=','&'实例详解
- AngularJs Scope详解及示例代码
- angularjs ng-model绑定number\date类型input框情况
- AngularJS ng-change 指令的详解及简单实例
- angularjs $scope.$apply 方法详解
- AngularJs scope详解
- Angularjs Scope 详解
- Angular.JS中的指令引用template与指令当做属性详解
- angular.js学习(1)--directive指令独立scope
- angularjs ng-model绑定number\date类型input框情况
- AngularJS ng-bind-html 指令详解及实例代码
- AngularJs directive指令详解
- AngularJS scope destroy 详解