首頁 >web前端 >js教程 >AngularJS 文件閱讀scope指令你知道多少? angularjs文件所閱讀的scope指令的詳解

AngularJS 文件閱讀scope指令你知道多少? angularjs文件所閱讀的scope指令的詳解

寻∝梦
寻∝梦原創
2018-09-07 14:52:011280瀏覽
<h1><span style="font-size: 16px;"><span style="font-size: 14px;">本篇文章主要的介紹了關於<a href="http://www.php.cn/course/47.html" target="_blank">angularjs</a>文檔閱讀的scope指令,本文詳細的解讀了angularjs文檔閱讀的scope指令的完整使用方法。現在就讓我們一起來看這篇文章吧</span><br></span></h1> <h1><span style="font-size: 16px;">scope</span></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> <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> <p>隔離物件定義了源自於指令元素的屬性的本機<code>scope</code>屬性集合。 </p> <h3>scope綁定</h3> <p>以下幾種綁定都是可以加參數的。 </p> <p>範例:</p> <pre class="brush:php;toolbar:false">scope: {     name: '=nameAttr' }</pre> <p>綁定的就是:<code><test name-attr="'hello'"></test></code>。 </p> <pre class="brush:php;toolbar:false">scope: {     name: '=' }</pre> <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> <p>(想看更多就到PHP中文網<a href="http://www.php.cn/course/47.html" target="_blank">angularjs學習手冊</a>中學習)</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> <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> <p>本篇文章到这就结束了(想看更多就到PHP中文网<a href="http://www.php.cn/course/47.html" target="_blank">angularjs学习手册</a>中学习),有问题的可以在下方留言提问</p> <p class="comments-box-content"></p>

以上是AngularJS 文件閱讀scope指令你知道多少? angularjs文件所閱讀的scope指令的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn