AngularJS 문서 읽기 지시문 범위

<p>이 글은 AngularJS 문서를 읽기 위한 지침 범위를 주로 소개합니다. 이제는 모든 사람과 공유합니다. </p> <h1>scope</h1># 🎜🎜# 지시문은 <code>AngularJS</code>에서 가장 일반적으로 사용되는 기능으로, 프런트엔드에서 코드 재사용을 쉽게 구현할 수 있습니다. 명령어의 본질은 명령어 <code>범위</code>의 내부 도메인과 외부 도메인 간의 상호 작용에 있습니다. <p><code>AngularJS</code>最常用的功能，让我们很容易在前台实现代码复用。而指令最精髓的地方，就在于指令内外域<code>scope</code>的交互方式。</p> <p>本文属于一篇对文档的翻译加上一些自己对此的理解，因水平有限，可能某些地方翻译的不通顺，或者翻译的错了，欢迎大家批评指正。本文对<code>scope</code>的用法以及描述均翻译自<code>AngularJS</code>英文文档，文档地址：AngularJS 官方文档</p> <p><code>scope</code>属性的值可以是<code>false</code>，可以是<code>true</code>，也可以是对象。</p> <h2>false</h2> <p><code>false</code>：这是指令<code>scope</code>的默认属性，不会为指令创建一个<code>scope</code>，这个指令会使用他的父<code>scope</code>。</p> <h2>true</h2> <p><code>true</code>：为指令创建一个从父<code>scope</code>原型继承的子<code>scope</code>。</p> <h2>对象</h2> <p><code>{key: value}</code>：为指令创建一个新的隔离<code>scope</code>，隔离<code>scope</code>和通常的<code>scope</code>的区别在于：隔离<code>scope</code>不从父<code>scope</code>做原型继承。</p> <p>不从父<code>scope</code>做原型继承，这对于创建可重用的组件非常有用，可重用组件不应该从父<code>scope</code>读取或修改属性。</p> <p><strong>注意：一个有隔离<code>scope</code>但是没有<code>template</code>或<code>templateUrl</code>的指令不会将隔离<code>scope</code>应用到它的子元素。</strong>这是文档上写的，目前还没有理解到究竟是什么意思。</p> <p>也可能是我翻译的不对，以下是原文：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Note that an isolate scope directive without a template or templateUrl will not apply the isolate scope to its children elements.</pre><div class="contentsignin">로그인 후 복사</div></div> <p>隔离对象定义了源于指令元素的属性的本地<code>scope</code>属性集合。</p> <h3>scope绑定</h3> <p>以下几种绑定都是可以加参数的。</p> <p>例：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">scope: {     name: '=nameAttr' }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>绑定的就是：<code><test name-attr="'hello'"></test></code>。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">scope: {     name: '=' }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>绑定的就是：<code><test name="'hello'"></test></code>。</p> <h3>字符串绑定</h3> <p><code>@</code>/<code>@attr</code>：绑定本地<code>scope</code>的属性到<code>DOM</code>属性的值，这个结果总是一个字符串，因为<code>DOM</code>属性就是字符串。随着<code>DOM</code>属性值的改变，指令<code>scope</code>上的属性也会改变，因为这个属性是在它的父<code>scope</code>上读取的。</p> <h3>双向绑定</h3> <p><code>=</code>/<code>=attr</code>：本地<code>scope</code>的属性和传递到属性上的表达式建立双向绑定，该表达式是在父<code>scope</code>的范围内计算的。如果绑定的表达式不是可赋值的，或者它不是可选的但是指令中没有传，<code>$compile:noassign</code>异常就会被抛出，因为它无法和父<code>scope</code>同步。</p> <p>默认地，<code>$watch</code>方法通常用来监听改变，并且根据对象的地址来进行相等判断。然而，如果一个对象地址或数组地址被传递到绑定的表达式中，比较的方法就是通过判断值是否相等。也可以使用<code>=*</code>/<code>=*attr</code>和<code>$watchCollection</code>进行浅监听。</p> <p>这段话还不是很理解，在<code>StackOverflow</code>找到了一个靠谱的回答，但还不是很明白。AngularJS =* 问题</p> <h3>单向绑定</h3> <p><code><</code>/<code><attr</code>：在本地<code>scope</code>和传递到<code>DOM</code>属性上的表达式之间建立单向绑定，所有在<code>DOM</code>属性上表达式的改变会反映到<code>scope</code>的属性上，但是<code>scope</code>属性上的改变不会反映到<code>DOM</code>属性的表达式上。</p><p><strong>但是这有两个警告：</strong></p><p>1.单向绑定不是将父<code>scope</code>的值拷贝到隔离<code>scope</code>上，而是简单的设置相同的值。如果你传的是一个对象，那在隔离<code>scope</code>上对该对象的改变会反映到父<code>scope</code>上，因为两者引用同一个对象。</p><p>2.单向绑定监视的是父值地址的改变。这意味着在父值上的<code>$watch</code>仅仅在引用的地址发生改变时才会生效。大多数情况下，这是不需要关心的。但是必须要知道如果你单向绑定了一个对象，然后会改变隔离<code>scope</code>上的对象，如果改变了父<code>scope</code>上的该对象的一个属性，这个改变是不会传递到隔离<code>scope</code>上的，因为这个对象的地址没有改变，除非你赋值一个新的对象。</p><p>如果不打算将隔离<code>scope</code>이 글은 제가 이해한 내용을 일부 추가한 글입니다. 제 수준의 한계로 번역이 원활하지 않거나 틀린 부분이 있을 수 있으니 비판은 언제든지 환영합니다. 그리고 나를 정정하십시오. 본 글의 <code>scope</code> 사용법과 설명은 <code>AngularJS</code> 영문 문서를 번역한 것입니다. 문서 주소: AngularJS 공식 문서 </p>#🎜🎜#<code>scope </code> 속성 값은 <code>false</code>, <code>true</code> 또는 객체일 수 있습니다. #🎜🎜#<h2>false</h2>#🎜🎜#<code>false</code>: 이는 <code>scope</code> 지시어의 기본 속성입니다. </code> 지시문에 대해 생성된 경우 이 지시문은 상위 <code>범위</code>를 사용합니다. #🎜🎜#<h2>true</h2>#🎜🎜#<code>true</code>: 프로토타입으로 상위 <code>scope<에서 상속되는 지시문에 대한 하위 <code>scope</code>를 만듭니다. /코드> >. #🎜🎜#<h2>객체</h2>#🎜🎜#<code>{key: value}</code>: 지시어에 대한 새 격리 <code>범위</code>를 만들고 <code>범위를 격리합니다. </code>와 일반 <code>scope</code>의 차이점은 격리된 <code>scope</code>가 상위 <code>scope</code>에서 프로토타입을 상속하지 않는다는 것입니다. #🎜🎜##🎜🎜#상위 <code>범위</code>에서 프로토타입 상속을 수행하지 마세요. 이는 재사용 가능한 구성요소를 생성하는 데 매우 유용하며 상위 <code>범위</code>에서 읽어서는 안 됩니다. 아니면 속성을 수정하세요. #🎜🎜##🎜🎜#<strong>참고: 격리 <code>scope</code>는 있지만 <code>template</code> 또는 <code>templateUrl</code>이 없는 지시어는 < code>scope</code>는 하위 요소에 적용됩니다. </strong>문서에 이렇게 적혀 있는데 아직 무슨 뜻인지 이해가 안 되네요. #🎜🎜##🎜🎜#내 번역이 잘못되었을 수도 있습니다. 다음은 원본 텍스트입니다. #🎜🎜#<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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 } } }; });</pre><div class="contentsignin">로그인 후 복사</div></div>#🎜🎜#격리된 개체는 다음 속성에서 발생하는 로컬 <code>scope</code> 속성을 ​​정의합니다. 지시 요소가 수집됩니다. #🎜🎜#<h3>범위 바인딩</h3>#🎜🎜#다음 바인딩은 모두 매개변수를 추가할 수 있습니다. #🎜🎜##🎜🎜#예: #🎜🎜#rrreee#🎜🎜#바인딩은 <code><test name-attr="'hello'"></test></code> 입니다. #🎜🎜#rrreee#🎜🎜#바인딩은 <code><test name="'hello'"></test></code>입니다. #🎜🎜#</p> <h3>문자열 바인딩</h3>#🎜🎜#<code>@</code>/<code>@attr</code>: 로컬 <code>scope</code> 속성을 ​​값에 바인딩 <code>DOM</code> 속성이 문자열이기 때문에 결과는 항상 문자열입니다. <code>DOM</code> 속성 값이 변경되면 <code>scope</code> 지시어의 속성도 변경됩니다. 왜냐하면 이 속성은 상위 <code>scope</code>에서 읽혀지기 때문입니다. #🎜🎜#<h3>양방향 바인딩</h3>#🎜🎜#<code>=</code>/<code>=attr</code>: 로컬 <code>범위</code>의 속성 및 전송 > 상위 <code>scope</code> 범위 내에서 평가되는 속성의 표현식에 대한 양방향 바인딩을 설정합니다. 바인딩된 표현식을 할당할 수 없거나 선택 사항은 아니지만 지시어에 전달되지 않은 경우 상위 <code>scope $compile:nosign</code> 예외가 발생합니다. /code>동기화. #🎜🎜##🎜🎜#기본적으로 <code>$watch</code> 메서드는 일반적으로 객체의 주소를 기반으로 변경 사항을 모니터링하고 동일성 판단을 내리는 데 사용됩니다. 그러나 바인딩 표현식에 객체 주소나 배열 주소가 전달되면 비교 방법은 값이 같은지 여부를 확인하는 것입니다. 얕은 모니터링을 위해 <code>=*</code>/<code>=*attr</code> 및 <code>$watchCollection</code>을 사용할 수도 있습니다. #🎜🎜##🎜🎜# 저는 아직도 이 구절을 잘 이해하지 못합니다. <code>StackOverflow</code>에서 믿을만한 답변을 찾았지만, 여전히 잘 이해되지 않습니다. AngularJS =* 문제#🎜🎜#<h3>단방향 바인딩</h3>#🎜🎜#<code><</code>/<code><attr>: 로컬 <code>범위 </code>와 <code>DOM</code> 속성에 전달된 표현식 사이에 단방향 바인딩이 설정됩니다. <code>DOM</code> 속성의 표현식에 대한 모든 변경 사항은 <code> 범위</code> 속성이지만 <code>scope</code> 속성의 변경 사항은 <code>DOM</code> 속성의 표현에 반영되지 않습니다. #🎜🎜##🎜🎜#<strong>그러나 두 가지 경고가 있습니다. </strong>#🎜🎜##🎜🎜#1 단방향 바인딩은 상위 <code>범위</code>의 값을 복사하지 않습니다. >를 격리된 <code>범위</code>로 지정하고 동일한 값을 설정하기만 하면 됩니다. 개체를 전달하면 격리된 <code>범위</code>의 개체에 대한 변경 사항이 상위 <code>범위</code>에 반영됩니다. 둘 다 동일한 개체를 참조하기 때문입니다. #🎜🎜##🎜🎜#2. 단방향 바인딩은 상위 값 주소의 변경 사항을 모니터링합니다. 즉, 상위 값의 <code>$watch</code>는 참조된 주소가 변경되는 경우에만 적용됩니다. 대부분의 경우 이는 걱정할 필요가 없습니다. 그러나 개체를 단방향으로 바인딩하면 상위 <code>범위</code>에서 개체의 속성을 변경하면 격리된 <code>범위</code>의 개체가 변경된다는 점을 알아야 합니다. >, 새 개체를 할당하지 않는 한 개체의 주소가 변경되지 않았기 때문에 이 변경 사항은 격리된 <code>범위</code>에 전파되지 않습니다. #🎜🎜##🎜🎜#단방향 바인딩은 격리된 <code>범위</code>에 대한 변경 사항을 상위 노드에 전파하지 않으려는 경우 유용합니다. #🎜🎜#<h3>绑定方法</h3> <p><code>&</code>/<code>&attr</code>：在父<code>scope</code>提供一个可执行的表达式，就是传一个方法。</p> <h3>设置可选</h3> <p>所有的绑定(<code>@, =, <, &</code>)都能通过在表达式上添加<code>?</code>设置为可选的，这个标志必须在绑定模式之后，属性名称之前。</p> <p>可选和不可选的区别在于：</p> <ul class=" list-paddingleft-2"> <li><p>绑定是可选的，这个属性不会被定义。</p></li> <li><p>绑定不是可选的，这个属性被定义了。</p></li> </ul> <p>以下是<code>AngularJS</code>文档中对可选指令的示例代码。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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       }     }   }; });</pre><div class="contentsignin">로그인 후 복사</div></div> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p> <p>相关推荐：</p> <p class="comments-box-content"><a title="AngularJS 表格导出添加额外信息" href="http://www.php.cn/js-tutorial-406294.html" target="_blank">AngularJS 表格导出添加额外信息</a><br></p> <p class="mt20 ad-detail-mm hidden-xs"><a title="angularjs的数据绑定" href="http://www.php.cn/js-tutorial-406293.html" target="_blank">angularjs的数据绑定</a><br></p></attr></code>

위 내용은 AngularJS 문서 읽기 지시문 범위의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!