详解Angular.js指令中scope类型的几种特殊情况

前言

大家都知道在默认情况下,指令应该访问父作用域.如果我们对指令暴露了父控制器的scope,那么指令就可以自由的修改scope属性.在一些情况下,你的指令可能想要添加一些只有内部可以使用的属性和函数,如果我们都在父作用域中完成,可能会污染了父作用域,因此,我们有以下两种选择:

使用父作用域-如果不需要操作父作用域属性,不需要一个新的作用域,可以直接使用父作用域

scope:false

一个子作用域-这个作用域会原型继承父作用域

scope:true

一个隔离的作用域-一个全新的、不继承、独立存在的作用域

scope:{}

作用域可以由指令定义对象中的scope属性定义，下面是关于scope属性的一些说明：

指令中的scope常见的类型

=

  1. '=',用于子作用域与父作用域双向绑定.使用这种方法可以将一个实际的作用域模型赋值给一个属性,而不是一个普通的字符串.效果是你可以传递复杂的数据模型,例如数组/对象等到隔离作用域.父作用域或者子作用域属性发生了改变,会相应影响对方.
  2. '=?',这种情况可以避免父作用域属性中不存在当前属性情况,避免抛出异常.--'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.'
  3. '=*',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).

&

  1. '&',用于执行父作用域中的函数.

@

  1. '@',进行单项文本绑定.使用这种方法可以将字符串传递到属性,当父作用域属性发生变化时,隔离作用域模型也发生变化.然而,反之则不成立!你不能通过操纵隔离作用域来改变父作用域.

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Angular1.x复杂指令实例详解

    本文实例讲述了Angular1.x复杂指令.分享给大家供大家参考,具体如下: 名称 描述 compile 指定一个编译函数 controller 为指令创建一个控制器函数 link 为指令指定链接函数 replace 指定模板内容是否替换指令所应用到的元素 require 声明对某个控制器的依赖 restrict 指定指令如何使用ACEM scope 为指令创建一个新的作用域或者一个隔离的作用域 template 指定一个将被插入到HTML文档的模板 templateUrl 指定一个将被插入到H

  • Angularjs编写KindEditor,UEidtor,jQuery指令

    目前angularJS非常火热,本人也在项目中逐渐使用该技术,在angularJS中,指令可以说是当中非常重要的一部分,这里分享一些自己编写的指令: 注:本人项目中用了oclazyload进行部分JS文件加载 1.KindEditor 复制代码 代码如下: angular.module('AdminApp').directive('uiKindeditor', ['uiLoad', function (uiLoad) {     return {         restrict: 'EA',

  • 深入讲解AngularJS中的自定义指令的使用

    深入讲解AngularJS中的自定义指令的使用

    AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数.这可能很难理解.现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码.那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来.这样的代码更容易理解.AngularJS中有四种类型的自定义指令: 元素指令 属性指令 CSS class 指令 注释指令 在我们现有的app中实现他们之前,我们来看看自定义指令是个什么样子:   元素指令 在html中写

  • Angular1.x自定义指令实例详解

    本文实例讲述了Angular1.x自定义指令.分享给大家供大家参考,具体如下: 调用Module.directive方法,传入指令名称和工厂函数,返回一个对象. 指令名称中每个大写字母会被认为是属性名中的一个独立的词,而每个词之间是以一个连字符分隔的. var myApp = angular.module('myApp', []) .directive("unorderedList", function () { return function(scope, element, attr

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • AngularJS内置指令

    指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.

  • AngularJS中的指令全面解析(必看)

    AngularJS中的指令全面解析(必看)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统,本人也是初学,查阅了一些资料,要是有一些说的不好的地方,万望指出. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码

  • angular分页指令操作

    angular分页指令操作

    目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令.直接贴代码,详情如下: index.html <body id="sBill" ng-controller="map_ctrl"> <table class="table table-striped" style="margin: 0px;border:1px solid #ccc;width:800px;min-height:200

  • AngularJS学习笔记之基本指令(init、repeat)

    AngularJS学习笔记之基本指令(init.repeat) <h3>ng-init初始化变量</h3> <div ng-init="name='aurora';age='18'"> <p ng-bind="name+','+age"></p> <p>{{name+','+age}}</p> <p ng-bind="name"></p>

  • Angular.js自定义指令学习笔记实例

    本文给大家分享angular.js学习笔记之自定义指令实例代码讲解,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularDirective</title> <script src="http://cdn.bootcss.com/angular.js/1.4.6

  • 用AngularJS的指令实现tabs切换效果

    用AngularJS的指令实现tabs切换效果

    先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: <A-deirective> <B-directive></B-directive> <C-directive></C-directive> </A-directive> 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁. <!DOCTYPE html> <html lang="en"

  • Angular之指令Directive用法详解

    Angular之指令Directive用法详解

    项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下: 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性.不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上. 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp&q

随机推荐