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

 更新时间:2017年02月21日 08:44:48   作者:xishiyi7  
AngularJs最重要也是最难理解的模块之一就是它的指令(directive)了,自定义指令配置有很多个参数,下面这篇文章主要介绍了关于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. '@',进行单项文本绑定.使用这种方法可以将字符串传递到属性,当父作用域属性发生变化时,隔离作用域模型也发生变化.然而,反之则不成立!你不能通过操纵隔离作用域来改变父作用域.

总结

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

相关文章

  • AngularJS安装版本问题解析

    AngularJS安装版本问题解析

    这篇文章主要介绍了AngularJS安装版本问题解析,在这需要注意在安装前请确保自己安装NodeJS环境版本为V18及以上,否则会因node版本问题导致项目无法正常运行,需要的朋友可以参考下
    2024-02-02
  • SpringMVC简单整合Angular2的示例

    SpringMVC简单整合Angular2的示例

    这篇文章主要介绍了SpringMVC简单整合Angular2的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • AngularJS 模块详解及简单实例

    AngularJS 模块详解及简单实例

    本文主要介绍AngularJS 模块,这里帮大家整理了相关资料,详细介绍了AngularJS的基础知识,有需要的朋友可以参考下
    2016-07-07
  • AngularJS实现tab选项卡的方法详解

    AngularJS实现tab选项卡的方法详解

    这篇文章主要介绍了AngularJS实现tab选项卡的方法,结合实例形式较为详细的分析了AngularJS实现tab选项卡的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2017-07-07
  • AngularJs Managing Service Dependencies详解

    AngularJs Managing Service Dependencies详解

    本站主要介绍AngularJs Managing Service Dependencies的知识资料,这里整理相关知识,及简单示例代码,有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS实现ajax请求的方法

    AngularJS实现ajax请求的方法

    这篇文章主要介绍了AngularJS实现ajax请求的方法,结合实例形式分析了AngularJS实现ajax请求的前端界面、ajax交互及后台php处理技巧,需要的朋友可以参考下
    2016-11-11
  • angular json对象push到数组中的方法

    angular json对象push到数组中的方法

    下面小编就为大家分享一篇angular json对象push到数组中的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Angular2+国际化方案(ngx-translate)的示例代码

    Angular2+国际化方案(ngx-translate)的示例代码

    本篇文章主要介绍了Angular2+国际化方案(ngx-translate)的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • AngularJS入门教程(二):AngularJS模板

    AngularJS入门教程(二):AngularJS模板

    这篇文章主要介绍了AngularJS入门教程(二):AngularJS模板,本文是系列文章的第三篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下
    2014-12-12
  • 在 Angular 中获取当前日期的方法

    在 Angular 中获取当前日期的方法

    我们将通过示例介绍一种在 Angular 应用程序中获取当前日期的简单方法,我们还将解决如何更改 Angular 中的日期格式,对在Angular中获取当前日期感兴趣的朋友跟随小编一起看看吧
    2023-05-05

最新评论