关于angularJs指令的Scope(作用域)介绍  更新时间:2016年10月25日 09:21:12   投稿:jingxian   下面小编就为大家带来一篇angularJs指令的Scope(作用域)介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{};默认情况下是false。 1.scope = false JS 代码: html 代码: result: 修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性。 2. scope=true 修改上面的JS代码,将指令中的:scope:false修改为scope:true 然后我们再试着在我们的input输入框中写一些字符串,会发现,指令中的那个name发生了变化,但是指令外的那个name却没有发生变化,这说明了一个问题。 当我们将scope设置为true的时候,我们就新创建了一个作用域,只不过这个作用域是继承了我们的父作用域;我觉得可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。 当我们将scope设置为false的时候,我们创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中。 3. scope={} 当我们将scope设置为{}时,意味着我们创建的一个新的与父作用域隔离的新的作用域,这使我们在不知道外部环境的情况下,就可以正常工作,不依赖外部环境。 JS代码: html代码: result: 修改文本框内容只有指令中的名字会被修改. scope: {@=&} @ 这是一个单项绑定的前缀标识符 使用方法:在元素中使用属性,好比这样,注意,属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。 = 这是一个双向数据绑定前缀标识符 使用方法:在元素中使用属性,好比这样,注意,数据的双向绑定要通过=前缀标识符实现,所以不可以使用{{}}。 & 这是一个绑定函数方法的前缀标识符 使用方法:在元素中使用属性,好比这样,注意,属性的名字要用-将多个个单词连接。 以上就是小编为大家带来的关于angularJs指令的Scope(作用域)介绍全部内容了,希望大家多多支持脚本之家~ 您可能感兴趣的文章: 详解angularjs 学习之 scope作用域 深入探究AngularJs之$scope对象(作用域) Angular.js之作用域scope”@”,”=”,”&”实例详解 AngularJs学习第五篇从Controller控制器谈谈$scope作用域 深入理解JavaScript系列(14) 作用域链介绍(Scope Chain) javascript中的作用域scope介绍 JavaScript 作用域scope简单汇总 angularjs 指令 scope 相关文章 Angular2使用SVG自定义图表(条形图、折线图)组件示例 这篇文章主要介绍了Angular2使用SVG自定义图表(条形图、折线图)组件,涉及Angular结合svg进行图表绘制的相关操作技巧,需要的朋友可以参考下 2019-05-05 Angular指令之restict匹配模式的详解 这篇文章主要介绍了Angular指令之restict匹配模式的详解的相关资料,这里对Angularjs 中restict匹配模式进行详解并列举了四种模式进行比较,需要的朋友可以参考下 2017-07-07 详解Angular4 路由设置相关 本篇文章主要介绍了详解Angular4 路由设置相关,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 angularJS 中input示例分享 这篇文章主要介绍了angularJS 中input示例分享,需要的朋友可以参考下 2015-02-02 强大的 Angular 表单验证功能详细介绍 本篇文章主要介绍了强大的 Angular 表单验证功能详细介绍,使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求,有兴趣的可以了解一下 2017-05-05 angularjs ocLazyLoad分步加载js文件实例 本篇文章主要介绍了angularjs ocLazyLoad分步加载js文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-01-01 利用Ionic2 + angular4实现一个地区选择组件 ionic是一个移动端开发框架,使用hybird技术,只要使用前端开发技术就可以开发出电脑端,安卓端和ios端的站点程序。下面这篇文章主要给大家介绍了关于利用Ionic2 + angular4实现一个地区选择组件的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-07-07 AngularJs的UI组件ui-Bootstrap之Tooltip和Popover 这篇文章主要介绍了AngularJs的UI组件ui-Bootstrap之Tooltip和Popover,tooltip和popover是轻量的、可扩展的、用于提示的指令。具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2018-07-07 AngularJS自动表单验证 这篇文章主要介绍了AngularJS手动表单验证的相关资料,AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证,本文重点介绍AngularJS自动表单验证,感兴趣的小伙伴们可以参考一下 2016-02-02 详解AngularJS中的表格使用 这篇文章主要介绍了详解AngularJS中的表格使用,作为热门的JavaScript框架,AngularJS中提供的表格功能十分强大,需要的朋友可以参考下 2015-06-06 最新评论

每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{};默认情况下是false。

1.scope = false

JS 代码:

html 代码:

result:

修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性。

2. scope=true

修改上面的JS代码,将指令中的:scope:false修改为scope:true

然后我们再试着在我们的input输入框中写一些字符串,会发现,指令中的那个name发生了变化,但是指令外的那个name却没有发生变化,这说明了一个问题。

当我们将scope设置为true的时候,我们就新创建了一个作用域,只不过这个作用域是继承了我们的父作用域;我觉得可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。
当我们将scope设置为false的时候,我们创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中。

3. scope={}

当我们将scope设置为{}时,意味着我们创建的一个新的与父作用域隔离的新的作用域,这使我们在不知道外部环境的情况下,就可以正常工作,不依赖外部环境。

JS代码:

html代码:

result:

修改文本框内容只有指令中的名字会被修改.

scope: {@=&}

@
这是一个单项绑定的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive my-name=”{{name}}”></div>,注意,属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

=
这是一个双向数据绑定前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive age=”age”></div>,注意,数据的双向绑定要通过=前缀标识符实现,所以不可以使用{{}}。

&
这是一个绑定函数方法的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive change-my-age=”changeAge()”></div>,注意,属性的名字要用-将多个个单词连接。

以上就是小编为大家带来的关于angularJs指令的Scope(作用域)介绍全部内容了,希望大家多多支持脚本之家~

您可能感兴趣的文章:

  • 详解angularjs 学习之 scope作用域
  • 深入探究AngularJs之$scope对象(作用域)
  • Angular.js之作用域scope”@”,”=”,”&”实例详解
  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域
  • 深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
  • javascript中的作用域scope介绍
  • JavaScript 作用域scope简单汇总
张贴在3