AngularJS 문서 읽기 범위 지시문 얼마나 알고 있나요? Anglejs 문서 읽기의 범위 지시문에 대한 자세한 설명

이 글에서는 angularjs 문서 읽기를 위한 범위 지시문을 주로 소개합니다. 이 글에서는 각도J 문서 읽기를 위한 범위 지시문의 전체 사용법을 자세히 설명합니다. 지금 바로 이 글을 살펴보겠습니다

scope

지시문은 AngularJS에서 가장 일반적으로 사용되는 기능으로, 프런트엔드에서 코드 재사용을 쉽게 구현할 수 있습니다. 명령어의 본질은 명령어 범위의 내부 도메인과 외부 도메인 간의 상호 작용에 있습니다. 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但是没有template或templateUrl的指令不会将隔离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'
}

绑定的就是：<test name-attr="'hello'"></test>。

scope: {
    name: '='
}

绑定的就是：<test name="'hello'"></test>。

字符串绑定

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

双向绑定

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

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

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

（想看更多就到PHP中文网angularjs学习手册中学习）

单向绑定

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

但是这有两个警告：

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

본 글은 제가 이해한 내용을 일부 추가한 글입니다. 제 수준의 한계로 인해 번역이 원활하지 않거나 틀린 부분이 있을 수 있으니 여러분의 비판과 수정을 환영합니다. 이 글의 scope 사용법과 설명은 AngularJS 영문 문서를 번역한 것입니다. 문서 주소: AngularJS 공식 문서🎜🎜scope의 값 > 속성은 false일 수 있으며 true 또는 객체일 수 있습니다. 🎜

false

🎜false: 이는 scope 지시어의 기본 속성입니다. 지시문은 상위 범위를 사용합니다. 🎜

true

🎜true: 프로토타입으로 상위 scope에서 상속되는 지시어에 대한 하위 scope를 만듭니다. 🎜

객체

🎜{key: value}: 지시어에 대한 새로운 격리 범위를 생성하고 범위를 격리하며 일반적으로 scope의 차이점은 격리된 scope가 상위 scope에서 프로토타입을 상속하지 않는다는 것입니다. 🎜🎜상위 범위에서 프로토타입 상속이 없습니다. 이는 재사용 가능한 구성 요소를 만드는 데 매우 유용합니다. 🎜🎜참고: 격리된 범위는 있지만 템플릿 또는 templateUrl은 없는 지시어는 범위를 격리하지 않습니다. 코드는 >자식 요소에 적용됩니다. 문서에 이렇게 적혀 있는데 아직 무슨 뜻인지 이해가 안 되네요. 🎜🎜제 번역이 잘못되었을 수도 있습니다. 다음은 원본 텍스트입니다. 🎜

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
      }
    }
  };
});

🎜격리 개체는 지시문 요소의 속성에서 파생된 로컬 scope 속성 컬렉션을 정의합니다. 🎜

범위 바인딩

🎜다음 바인딩은 모두 매개변수를 추가할 수 있습니다. 🎜🎜예: 🎜rrreee🎜는 <test name-attr="'hello'"></test>에 바인딩됩니다. 🎜rrreee🎜는 <test name="'hello'"></test>에 바인딩됩니다. 🎜

문자열 바인딩

🎜@/@attr: 로컬 scope 특성을 DOM에 바인딩합니다. 속성의 경우 DOM 속성이 문자열이기 때문에 이 결과는 항상 문자열입니다. DOM 속성 값이 변경되면 scope 지시어의 속성도 변경됩니다. 왜냐하면 이 속성은 상위 scope에서 읽혀지기 때문입니다. 🎜

양방향 바인딩

🎜=/=attr: 로컬 scope의 속성과 속성에 전달된 표현식 양방향 바인딩을 설정하면 상위 scope 범위 내에서 표현식이 평가됩니다. 바인딩된 표현식을 할당할 수 없거나 선택 사항은 아니지만 지시어에 전달되지 않은 경우 상위 scope $compile:nosign 예외가 발생합니다. /code>동기화. 🎜🎜기본적으로 $watch 메서드는 일반적으로 변경 사항을 모니터링하고 객체의 주소를 기반으로 동일성 판단을 수행하는 데 사용됩니다. 그러나 바인딩 표현식에 객체 주소나 배열 주소가 전달되면 비교 방법은 값이 같은지 여부를 확인하는 것입니다. 얕은 모니터링을 위해 =*/=*attr 및 $watchCollection을 사용할 수도 있습니다. 🎜🎜저는 아직도 이 구절을 잘 이해하지 못합니다. StackOverflow에서 믿을 만한 답변을 찾았지만, 여전히 잘 이해되지 않습니다. AngularJS =* 문제🎜🎜 (자세한 내용을 보려면 PHP 중국어 웹사이트🎜angularjs 학습 매뉴얼🎜을 방문하여 학습하세요.)🎜

단방향 바인딩

🎜 /<code> <attr>: 로컬 <code>scope와 DOM 속성에 전달된 표현식 사이의 단방향 바인딩을 모두 에서 설정합니다. DOM code> 속성에 대한 표현식의 변경 사항은 scope 속성에 반영되지만 scope 속성의 변경 사항은 에 반영되지 않습니다. >DOM 속성. 🎜🎜그러나 두 가지 경고가 있습니다. 🎜🎜1. 단방향 바인딩은 상위 범위의 값을 격리된 범위에 복사하지 않습니다. 대신 동일한 값을 설정하면 됩니다. 개체를 전달하면 격리된 범위의 개체에 대한 변경 사항이 상위 범위에 반영됩니다. 둘 다 동일한 개체를 참조하기 때문입니다. 🎜

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

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

绑定方法

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

设置可选

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

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

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

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

以下是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学习手册中学习），有问题的可以在下方留言提问

위 내용은 AngularJS 문서 읽기 범위 지시문 얼마나 알고 있나요? Anglejs 문서 읽기의 범위 지시문에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!