<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>
<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">Salin selepas log masuk</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">Salin selepas log masuk</div></div>
<p>绑定的就是:<code><test name-attr="&#39;hello&#39;"></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">Salin selepas log masuk</div></div>
<p>绑定的就是:<code><test name="&#39;hello&#39;"></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>
<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">Salin selepas log masuk</div></div>
<p>本篇文章到这就结束了(想看更多就到PHP中文网<a href="http://www.php.cn/course/47.html" target="_blank">angularjs学习手册</a>中学习),有问题的可以在下方留言提问</p>
<p class="comments-box-content"></p>
Atas ialah kandungan terperinci AngularJS 文档阅读scope指令你知道多少?angularjs文档阅读的scope指令的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!