AngularJS document reading directive scope

<p>This article mainly introduces the scope command for reading AngularJS documents. It has certain reference value. Now I share it with you. Friends in need can refer to the </p> <h1>scope</h1> <p> command. It is the most commonly used function in <code>AngularJS</code>, allowing us to easily 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>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>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>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>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>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>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> <h3>One-way binding</h3> <p><code><</code>/<code><attr</code>: In local <code>scope</code> and pass A one-way binding is established between the expressions on 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 to the <code>scope</code> attribute will not be reflected in the expression of the <code>DOM</code> 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. One-way binding monitors changes in the parent value address. This means that <code>$watch</code> on the parent value will only take effect if the referenced address changes. In most cases, this is nothing to worry about. But you must know that if you bind an object one-way, then the object on the isolation <code>scope</code> will be changed. If you change an attribute of the object on the parent <code>scope</code>, this change It will not be passed to the isolation <code>scope</code> because the address of this object has not changed unless you assign a new object. </p> <p>One-way binding is useful if you do not intend to propagate changes to the isolated <code>scope</code> to the parent node. </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">Copy after login</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>

The above is the detailed content of AngularJS document reading directive scope. For more information, please follow other related articles on the PHP Chinese website!