AngularJS ドキュメント読み取りディレクティブのスコープ

<p>この記事では主に AngularJS ドキュメントを読むためのscopeコマンドを紹介します。これには特定の参考値がありますので、必要な友達はそれを参照してください</p> <h1>scope</h1> <p>コマンドは、<code>の最も一般的なコマンドです。 >AngularJS</code> よく使用される関数を使用すると、フロントエンドでのコードの再利用を簡単に実装できます。命令の本質は、命令 <code>scope</code> の内部ドメインと外部ドメイン間の相互作用にあります。 <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>この記事は文書の翻訳に私自身の理解を加えたものであり、私のレベルが低いため、一部の部分がスムーズに翻訳されない可能性や、翻訳が間違っている可能性があります。どなたでも私を批判したり修正したりできます。この記事の <code>scope</code> の使用方法と説明は <code>AngularJS</code> の英語ドキュメントから翻訳したものです ドキュメントアドレス: AngularJS 公式ドキュメント🎜🎜 <code>scope</code> の値。 code> 属性は、<code>false</code> にすることも、<code>true</code> またはオブジェクトにすることもできます。 🎜<h2>false</h2>🎜<code>false</code>: これはディレクティブ <code>scope</code> のデフォルト属性です。<code>scope</code> は作成されません。このディレクティブは、その親の <code>scope</code> を使用します。 🎜<h2>true</h2>🎜<code>true</code>: 親 <code>scope</code> からプロトタイプ的に継承するディレクティブの子 <code>scope</code> を作成します。 🎜<h2>Object</h2>🎜<code>{key: value}</code>: ディレクティブの新しい分離 <code>scope</code> を作成し、<code>scope</code> を分離して通常どおりに実行します。 <code>scope</code> の違いは、分離された <code>scope</code> が親の <code>scope</code> からプロトタイプを継承しないことです。 🎜🎜親 <code>scope</code> からのプロトタイプの継承はありません。これは、再利用可能なコンポーネントを作成する場合に非常に役立ちます。親 <code>scope</code> からプロパティを読み取ったり、変更したりする必要はありません。 🎜🎜<strong>注: <code>scope</code> が分離されているが、<code>template</code> または <code>templateUrl</code> がないディレクティブは、<code>scope</code> を分離しません。コードはその子要素に適用されます。文書にはこう書いてある</strong>のですが、未だに意味が分かりません。 🎜🎜私の翻訳が間違っている可能性があります。以下は原文です: 🎜<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>🎜分離オブジェクトは、ディレクティブ要素の属性から派生したローカルの <code>scope</code> 属性のコレクションを定義します。 🎜<h3>スコープ バインディング</h3>🎜 次のバインディングはすべてパラメータを追加できます。 🎜🎜例: 🎜rrreee🎜 は、<code><test name-attr="'hello'"></test></code> にバインドされています。 🎜rrreee🎜 は、<code><test name="'hello'"></test></code> にバインドされています。 🎜</p> <h3>文字列バインディング</h3>🎜<code>@</code>/<code>@attr</code>: ローカルの <code>scope</code> 属性を <code>DOM にバインドします。 </code> 属性を使用した場合、<code>DOM</code> 属性は文字列であるため、この結果は常に文字列になります。 <code>DOM</code> 属性値が変更されると、ディレクティブ <code>scope</code> の属性も変更されます。これは、この属性が親の <code>scope</code> で読み取られるためです。 🎜<h3>双方向バインディング</h3>🎜<code>=</code>/<code>=attr</code>: ローカル <code>scope</code> の属性と属性に渡される式 To双方向バインディングを確立すると、式は親 <code>scope</code> のスコープ内で評価されます。バインドされた式が割り当て可能でない場合、またはオプションではないがディレクティブで渡されない場合、親の <code>scope $compile:noassign</code> 例外がスローされます。 /コード>同期。 🎜🎜デフォルトでは、通常、変更を監視し、オブジェクトのアドレスに基づいて等価性の判断を実行するために <code>$watch</code> メソッドが使用されます。ただし、オブジェクト アドレスまたは配列アドレスがバインディング式に渡された場合、比較方法は値が等しいかどうかを判断します。浅いモニタリングには <code>=*</code>/<code>=*attr</code> および <code>$watchCollection</code> を使用することもできます。 🎜🎜この部分はまだよく理解できません。<code>StackOverflow</code> で信頼できる答えを見つけましたが、まだよく理解できません。 AngularJS =* 問題 🎜<h3>一方向バインディング</h3>🎜<code><</code>/<code><attr</code>: ローカル <code>scope</code> とパス A <code>DOM</code> 属性の式間で一方向のバインディングが確立され、<code>DOM</code> 属性の式のすべての変更が <code>scope</code> に反映されます。属性ですが、<code>scope</code> 属性の変更は <code>DOM</code> 属性の式には反映されません。 🎜🎜<strong>ただし、2 つの警告があります: </strong>🎜🎜1. 一方向バインディングは、親 <code>scope</code> の値を分離された <code>scope</code> にコピーしません。代わりに、同じ値を設定するだけです。オブジェクトを渡す場合、両方が同じオブジェクトを参照するため、分離された <code>scope</code> 上のオブジェクトへの変更は親の <code>scope</code> に反映されます。 🎜🎜2. 一方向バインディングは、親値アドレスの変更を監視します。これは、親値の <code>$watch</code> は、参照されるアドレスが変更された場合にのみ有効になることを意味します。ほとんどの場合、これは心配する必要はありません。ただし、オブジェクトを一方向にバインドする場合、親の <code>scope</code> 上のオブジェクトのプロパティを変更すると、分離された <code>scope</code> 上のオブジェクトが変更されることを知っておく必要があります。 >、新しいオブジェクトを割り当てない限りオブジェクトのアドレスは変更されていないため、この変更は分離された <code>scope</code> には反映されません。 🎜🎜一方向バインディングは、分離された <code>scope</code> への変更を親ノードに伝播するつもりがない場合に便利です。 🎜<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 ドキュメント読み取りディレクティブのスコープの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。