0

0

AngularJS 文档阅读scope指令你知道多少?angularjs文档阅读的scope指令的详解

寻∝梦

寻∝梦

发布时间:2018-09-07 14:52:01

|

1469人浏览过

|

来源于php中文网

原创

本篇文章主要的介绍了关于angularjs文档阅读的scope指令,本文详细的解读了angularjs文档阅读的scope指令的完整使用方法。现在就让我们一起来看这篇文章吧

scope

指令,是angularjs最常用的功能,让我们很容易在前台实现代码复用。而指令最精髓的地方,就在于指令内外域scope的交互方式。

本文属于一篇对文档的翻译加上一些自己对此的理解,因水平有限,可能某些地方翻译的不通顺,或者翻译的错了,欢迎大家批评指正。本文对scope的用法以及描述均翻译自AngularJS英文文档,文档地址:AngularJS 官方文档

scope属性的值可以是false,可以是true,也可以是对象。

false

false:这是指令scope的默认属性,不会为指令创建一个scope,这个指令会使用他的父scope

true

true:为指令创建一个从父scope原型继承的子scope

对象

{key: value}:为指令创建一个新的隔离scope,隔离scope和通常的scope的区别在于:隔离scope不从父scope做原型继承。

不从父scope做原型继承,这对于创建可重用的组件非常有用,可重用组件不应该从父scope读取或修改属性。

注意:一个有隔离scope但是没有templatetemplateUrl的指令不会将隔离scope应用到它的子元素。这是文档上写的,目前还没有理解到究竟是什么意思。

也可能是我翻译的不对,以下是原文:

Note that an isolate scope directive without a template or templateUrl will not apply the isolate scope to its children elements.

隔离对象定义了源于指令元素的属性的本地scope属性集合。

scope绑定

以下几种绑定都是可以加参数的。

例:

scope: {
    name: '=nameAttr'
}

绑定的就是:

scope: {
    name: '='
}

绑定的就是:

字符串绑定

@/@attr:绑定本地scope的属性到DOM属性的值,这个结果总是一个字符串,因为DOM属性就是字符串。随着DOM属性值的改变,指令scope上的属性也会改变,因为这个属性是在它的父scope上读取的。

双向绑定

=/=attr:本地scope的属性和传递到属性上的表达式建立双向绑定,该表达式是在父scope的范围内计算的。如果绑定的表达式不是可赋值的,或者它不是可选的但是指令中没有传,$compile:noassign异常就会被抛出,因为它无法和父scope同步。

默认地,$watch方法通常用来监听改变,并且根据对象的地址来进行相等判断。然而,如果一个对象地址或数组地址被传递到绑定的表达式中,比较的方法就是通过判断值是否相等。也可以使用=*/=*attr$watchCollection进行浅监听。

Grokipedia
Grokipedia

xAI推出的AI在线百科全书

下载

这段话还不是很理解,在StackOverflow找到了一个靠谱的回答,但还不是很明白。AngularJS =* 问题

(想看更多就到PHP中文网angularjs学习手册中学习)

单向绑定

/:在本地scope和传递到DOM属性上的表达式之间建立单向绑定,所有在DOM属性上表达式的改变会反映到scope的属性上,但是scope属性上的改变不会反映到DOM属性的表达式上。

但是这有两个警告:

1.单向绑定不是将父scope的值拷贝到隔离scope上,而是简单的设置相同的值。如果你传的是一个对象,那在隔离scope上对该对象的改变会反映到父scope上,因为两者引用同一个对象。

2.单向绑定监视的是父值地址的改变。这意味着在父值上的$watch仅仅在引用的地址发生改变时才会生效。大多数情况下,这是不需要关心的。但是必须要知道如果你单向绑定了一个对象,然后会改变隔离scope上的对象,如果改变了父scope上的该对象的一个属性,这个改变是不会传递到隔离scope上的,因为这个对象的地址没有改变,除非你赋值一个新的对象。

如果不打算将隔离scope的改变传播会父节点,单向绑定是很有用的。

绑定方法

&/&attr:在父scope提供一个可执行的表达式,就是传一个方法。

设置可选

所有的绑定(@, =, )都能通过在表达式上添加?设置为可选的,这个标志必须在绑定模式之后,属性名称之前。

可选和不可选的区别在于:

  • 绑定是可选的,这个属性不会被定义。

  • 绑定不是可选的,这个属性被定义了。

以下是AngularJS文档中对可选指令的示例代码。

app.directive('testDir', function() {
  return {
    scope: {
      notoptional: '=',
      optional: '=?',
    },
    bindToController: true,
    controller: function() {
      this.$onInit = function() {
        console.log(this.hasOwnProperty('notoptional')); // true
        console.log(this.hasOwnProperty('optional')); // false
      }
    }
  };
});

本篇文章到这就结束了(想看更多就到PHP中文网angularjs学习手册中学习),有问题的可以在下方留言提问

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

7

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

7

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

1

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

1

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

16

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

18

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
angular.js中文教学视频教程
angular.js中文教学视频教程

共40课时 | 14.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号