当前位置: 首页 > 编程笔记 >

关于angularJs指令的Scope(作用域)介绍

单于煌
2023-03-14
本文向大家介绍关于angularJs指令的Scope(作用域)介绍,包括了关于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: {@=&}

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

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

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

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

 类似资料:
  • 主要内容:如何使用 Scope,AngularJS 实例,Scope 概述,AngularJS 实例,Scope 作用范围,AngularJS 实例,根作用域,AngularJS 实例Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS

  • 因此,我希望可以使用优先级来确保我的指令首先运行,并最终创建一个隔离范围,当运行时,它重用隔离范围,而不是创建一个原型上从父范围继承的范围。文档声明该指令在优先级下运行。尚不清楚是高优先级还是低优先级。当我在指令中使用优先级时,没有什么不同,所以我尝试了。但这使情况变得更糟:我的双向绑定变成,并且我的指令不显示任何内容。 我创造了一个小提琴来显示我的问题。我已经注释掉了指令中的设置。我有一个nam

  • 问题内容: 我试图做一个简单的指令来显示名称并允许对其进行更改。当我在名称页上放置多个指令时,它们似乎都共享name属性。我究竟做错了什么? 问题答案: 如前面的答案中所述,AngularJS指令的默认行为是共享它们所包含的范围。此行为通过指令定义对象中的参数进行更改。 您可以在AngularJS文档的此部分中查看scope参数的文档:http : //docs.angularjs.org/api

  • 本文向大家介绍深入探究AngularJs之$scope对象(作用域),包括了深入探究AngularJs之$scope对象(作用域)的使用技巧和注意事项,需要的朋友参考一下 这两天学习了AngularJs之$scope对象这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 一、作用域 AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模

  • 前言 在第12章关于变量对象的描述中,我们已经知道一个执行上下文 的数据(变量、函数声明和函数的形参)作为属性存储在变量对象中。 同时我们也知道变量对象在每次进入上下文时创建,并填入初始值,值的更新出现在代码执行阶段。 这一章专门讨论与执行上下文直接相关的更多细节,这次我们将提及一个议题——作用域链。 英文原文:http://dmitrysoshnikov.com/ecmascript/chapt

  • 问题内容: 更新 :在代码的另一部分中一定有些愚蠢。现在可以使用,因此bindToController语法很好。 我们正在使用AngularJS 1.4,它引入了在指令中使用bindToController的新方法。 经过大量的阅读(也许并不能理解所有内容),我们如下定义了指令: 从这样的另一个视图调用它: 先前已在视图控制器中定义: 像这样在指令模板中引用变量: 我们花了4小时试图弄清楚为什么我

  • 问题内容: 我试图在我的指令中使用隔离范围放置一些默认值。基本上,绑定指令后,我需要使用scope对象进行一些DOM操作。下面是我的代码: 控制器: 服务: 指示: 自定义指令元素: 现在,问题是,当尝试在指令内部的默认方法中访问隔离范围时,我在获取数据并将其绑定到DOM的同时获得了未定义的值。如何访问广播侦听器中的隔离作用域并修改指令模板HTML?还有另一个处理这个的麻烦吗? 问题答案: 问题是

  • 本文向大家介绍angularJS 中$scope方法使用指南,包括了angularJS 中$scope方法使用指南的使用技巧和注意事项,需要的朋友参考一下 以上就是关于angularJS 中$scope方法使用指南的全部内容了,希望大家能够喜欢。