<p>這篇文章主要介紹了關於AngularJS 文件閱讀的指令scope，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下</p>
<h1>scope</h1>
<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>的改變傳播會父節點，單向綁定是很有用的。 </p>
<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>
以上是AngularJS 文檔閱讀的指令scope的詳細內容。更多資訊請關注PHP中文網其他相關文章！
