AngularJS Documentation Reading Scope Directive How much do you know? Detailed explanation of scope directive in angularjs document reading

<h1 id="span-style-font-size-px-span-style-font-size-px-This-article-mainly-introduces-the-scope-directive-for-a-href-http-www-php-cn-course-html-target-blank-angularjs-a-document-reading-This-article-explains-in-detail-the-complete-use-of-the-scope-directive-for-angularjs-document-reading-Let-s-take-a-look-at-this-article-now-span-br-span"><span style="font-size: 16px;"><span style="font-size: 14px;">This article mainly introduces the scope directive for <a href="http://www.php.cn/course/47.html" target="_blank">angularjs</a> document reading. This article explains in detail the complete use of the scope directive for angularjs document reading. Let’s take a look at this article now</span><br></span></h1> <h1 id="span-style-font-size-px-scope-span"><span style="font-size: 16px;">scope</span></h1> <p> directive is the most popular one in <code>AngularJS</code> Commonly used functions make it easy for us to implement code reuse in the frontend. The essence of the instruction lies in the interaction between the inner and outer domains of the instruction <code>scope</code>. </p> <p>This article is a translation of a document plus some of my own understanding of it. Due to my limited level, there may be some places where the translation is not smooth or the translation is wrong. You are welcome to criticize and correct me. The usage and description of <code>scope</code> in this article are translated from the <code>AngularJS</code> English document. Document address: AngularJS official document </p> <p><code>scope</code> The value of the attribute can be <code>false</code>, which can be <code>true</code> or an object. </p> <h2 id="false">false</h2> <p><code>false</code>: This is the default attribute of the directive <code>scope</code>. A <code>scope</code> will not be created for the directive. This The directive will use its parent <code>scope</code>. </p> <h2 id="true">true</h2> <p><code>true</code>: Creates a child <code>scope</code> for the directive that prototypically inherits from the parent <code>scope</code>. </p> <h2 id="Object">Object</h2> <p><code>{key: value}</code>: Creates a new isolation <code>scope</code> for the directive, isolation <code>scope</code> and usually The difference between <code>scope</code> is: Isolated <code>scope</code> does not do prototypal inheritance from the parent <code>scope</code>. </p> <p> Does not do prototypal inheritance from the parent <code>scope</code>. This is useful for creating reusable components. Reusable components should not read or modify properties from the parent <code>scope</code>. </p> <p><strong>Note: A directive with isolate <code>scope</code> but without <code>template</code> or <code>templateUrl</code> will not isolate <code>scope</code>Apply to its child elements. </strong>This is written in the document, but I still don’t understand what it means. </p> <p>Maybe my translation is wrong, the following is the original text: </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">Copy after login</div></div> <p>The isolation object defines a local <code>scope</code> attribute collection originating from the attributes of the directive element. </p> <h3 id="scope-binding">scope binding</h3> <p>The following bindings can all add parameters. </p> <p>Example: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">scope: {     name: '=nameAttr' }</pre><div class="contentsignin">Copy after login</div></div> <p> is bound to: <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">Copy after login</div></div> <p> is bound to: <code><test name="'hello'"></test></code>. </p> <h3 id="String-binding">String binding</h3> <p><code>@</code>/<code>@attr</code>: Bind local <code>scope</code> attributes to <code>DOM The value of the </code> attribute, this result is always a string, because the <code>DOM</code> attribute is a string. As the <code>DOM</code> property value changes, the property on the directive <code>scope</code> will also change, because this property is read on its parent <code>scope</code>. </p> <h3 id="Two-way-binding">Two-way binding</h3> <p><code>=</code>/<code>=attr</code>: attributes of the local <code>scope</code> and expressions passed to the attributes To establish a two-way binding, the expression is evaluated within the scope of the parent <code>scope</code>. If the bound expression is not assignable, or it is not optional but is not passed in the directive, a <code>$compile:noassign</code> exception will be thrown because it cannot be combined with the parent <code>scope</code>Synchronize. </p> <p>By default, the <code>$watch</code> method is usually used to monitor changes and perform equality judgments based on the address of the object. However, if an object address or array address is passed into a bound expression, the comparison is by checking whether the values ​​are equal. You can also use <code>=*</code>/<code>=*attr</code> and <code>$watchCollection</code> for shallow monitoring. </p> <p> I still don’t quite understand this passage. I found a reliable answer in <code>StackOverflow</code>, but I still don’t quite understand it. AngularJS =* Problem</p> <p>(If you want to see more, go to the PHP Chinese website<a href="http://www.php.cn/course/47.html" target="_blank">angularjs learning manual</a> to learn)</p> <h3 id="One-way-binding">One-way binding</h3> <p><code><</code>/<code><attr</code>: Establishes a one-way binding between the local <code>scope</code> and the expression passed to the <code>DOM</code> attribute, all Changes in the expression on the <code>DOM</code> attribute will be reflected on the <code>scope</code> attribute, but changes on the <code>scope</code> attribute will not be reflected on the <code>DOM</code>On the expression of the attribute. </p> <p><strong>But there are two warnings: </strong></p> <p>1. One-way binding does not copy the value of the parent <code>scope</code> to the isolated <code>scope </code>, but simply set the same value. If you pass an object, changes to the object on the isolated <code>scope</code> will be reflected on the parent <code>scope</code>, because both reference the same object. </p> <p>2.单向绑定监视的是父值地址的改变。这意味着在父值上的<code>$watch</code>仅仅在引用的地址发生改变时才会生效。大多数情况下，这是不需要关心的。但是必须要知道如果你单向绑定了一个对象，然后会改变隔离<code>scope</code>上的对象，如果改变了父<code>scope</code>上的该对象的一个属性，这个改变是不会传递到隔离<code>scope</code>上的，因为这个对象的地址没有改变，除非你赋值一个新的对象。</p> <p>如果不打算将隔离<code>scope</code>的改变传播会父节点，单向绑定是很有用的。</p> <h3 id="绑定方法">绑定方法</h3> <p><code>&</code>/<code>&attr</code>：在父<code>scope</code>提供一个可执行的表达式，就是传一个方法。</p> <h3 id="设置可选">设置可选</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">Copy after login</div></div> <p>本篇文章到这就结束了（想看更多就到PHP中文网<a href="http://www.php.cn/course/47.html" target="_blank">angularjs学习手册</a>中学习），有问题的可以在下方留言提问</p> <p class="comments-box-content"></p>

The above is the detailed content of AngularJS Documentation Reading Scope Directive How much do you know? Detailed explanation of scope directive in angularjs document reading. For more information, please follow other related articles on the PHP Chinese website!