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(作用域)的更多相关文章
- 一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好
学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是 ...
- AngularJS 指令的 Scope (作用域)
参考:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的 ...
- angularjs指令中scope参数 true、false、{} 的区别详解
scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...
- angularJS MVC及$scope作用域
- AngularJS Scope(作用域)
1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...
- AngularJs之Scope作用域
前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...
- AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
- AngularJs(五)从Controller控制器谈谈$scope作用域
大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
随机推荐
- [Web] mobx 异步操作
转载自:https://www.jianshu.com/p/66dd328726d7 异步action action只能影响正在运行的函数,而无法影响当前函数调用的异步操作 .action 包装/装饰 ...
- Linux的tmpfs和ramfs
tmpfs tmpfs是一种虚拟内存文件系统, 它的存储空间在VM里面,现在大多数操作系统都采用了虚拟内存管理机制, VM(Virtual Memory) 是由Linux内核里面的VM子系统管理. V ...
- 检查 chrome 插件是否存在
你必须了解 chrome 插件开发才能阅读以下内容. 传送门: https://qa.1r1g.com/sf/ask/440544891/ 原理:页面 js 向 chrome 插件的 backgrou ...
- springMVC:为MultipartFilte配置了上传文件解析器,报错或不能使用
一.问题描述为支持restful风格请求,并且应对可能上传文件的情况,需要在配置hiddenHttpMethodFilter过滤器之前配置MultipartFilter.目的是让MultipartFi ...
- FilelistCreator --- 导出文件列表神器 及其他好用工具
https://www.sttmedia.com/ Standard Software WordCreator: Creates readable words, sentences or texts ...
- 【原】QuickTime安装时,提示CAB文件"QuickTime.cab"中找不到此文件
卸载安装程序:apple software updateapple mobile device supportapple 应用程序支持32apple 应用程序支持64 再重新安装quicktime
- 【转】WPF DataGridComboBoxColumn使用
若要填充下拉列表,请首先使用下列选项之一设置 ComboBox 的 ItemsSource 属性.静态资源. x:Static 代码实体.ComboBoxItem 类型的内联集合.实现效果如下: 如需 ...
- LwIP应用开发笔记之七:LwIP无操作系统HTTP服务器
前面我们实现了TCP服务器和客户端的简单应用,接下来我们实现一个基于TCP协议的应用协议,那就是HTTP超文本传输协议 1. HTTP协议简介 超文本传输协议(Hyper Text Transf ...
- 实现CI/CDk8s高可用集群搭建总结以及部署API到k8s
实现CI/CD(Centos7.2)系列二:k8s高可用集群搭建总结以及部署API到k8s 前言:本系列博客又更新了,是博主研究很长时间,亲自动手实践过后的心得,k8s集群是购买了5台阿里云服务器部署 ...
- 第N个丑数
#include <bits/stdc++.h> using namespace std; #define ll long long /* 把只包含质因子2.3和5的数称作丑数(Ugly ...