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(作用 ...
随机推荐
- adb命令和fastboot有什么区别
ADB中文解释就是调试桥的作用.既然是调试作用,需要开机并连接电脑,所以adb的命令是需要手机开启usb调试,比较典型的命令比如从电脑端敲入adb命令来安应用:adb install .还有一个命令我 ...
- 判断mysql数据库表和表字段是否存在
1.判断数据库表是否存在, // mysqlSELECT table_name FROM information_schema.tables WHERE table_name=#{tableName, ...
- 如何学会快速调用API
作为一名苦逼的程序员,在实现各种需求的过程中,总是需要调用各种各样的API,也就是要读各种文档.我们所要做的是弄清楚这些API的参数然后调用即可.说起来非常简单,是实际上却不是这样.现在火爆的机器学习 ...
- 开发日记:在VS项目中使用SVN版本号作为编译版本号
在实际项目中(特别是作为产品的项目),版本号是必不可少的一部分.版本号的规则也有许多种,在此不讨论具体的编码规范.对于迭代的产品,版本繁多,特别是有多个实施项目所使用产品的版本不同(基于定制需求)时, ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- 使用epoll实现一个udp server && client
udp server #!/usr/bin/env python #-*- coding:utf-8 -*- import socket import select import Queue #创建s ...
- [LeetCode] 737. Sentence Similarity II 句子相似度 II
Given two sentences words1, words2 (each represented as an array of strings), and a list of similar ...
- U盘安装Windows Server2008 R2
安装Windows 2008 r2 提示windows 无法安装到这个磁盘.选中的磁盘采用GPT分区形式 利用U盘装系统的步骤 第一 进入BIOS,找SECURITY—SECURE BOOT中的SEC ...
- Python的编码规范
7. 什么是 PEP8? 8号Python增强提案,是针对Python代码格式而编写的风格指南 8. 了解 Python 之禅么? 通过 import this 语句可以获取其具体的内容.它告诉大家何 ...
- django数据库配置,即数据库分库分表
一 Django的数据库配置 (一)修改settings.py文件关于数据库的配置: Django默认使用sqlite: DATABASES = { 'default': { 'ENGINE': ...