AngularJS Documentation Reading Scope Directive Wie viel wissen Sie? Detaillierte Erläuterung der Scope-Direktive beim Lesen von AngularJS-Dokumenten

<h1 id="span-style-font-size-px-span-style-font-size-px-In-diesem-Artikel-wird-hauptsächlich-die-Scope-Direktive-für-das-Lesen-von-a-href-http-www-php-cn-course-html-target-blank-AngularJS-a-Dokumenten-vorgestellt-In-diesem-Artikel-wird-ausführlich-die-vollständige-Verwendung-der-Scope-Direktive-für-das-Lesen-von-AngularJS-Dokumenten-erläutert-Werfen-wir-jetzt-einen-Blick-auf-diesen-Artikel-Der-Befehl-span-br-span"><span style="font-size: 16px;"><span style="font-size: 14px;">In diesem Artikel wird hauptsächlich die Scope-Direktive für das Lesen von <a href="http://www.php.cn/course/47.html" target="_blank">AngularJS</a>-Dokumenten vorgestellt. In diesem Artikel wird ausführlich die vollständige Verwendung der Scope-Direktive für das Lesen von AngularJS-Dokumenten erläutert. Werfen wir jetzt einen Blick auf diesen Artikel. Der Befehl </span><br></span></h1> <h1 id="span-style-font-size-px-scope-span"><span style="font-size: 16px;">scope</span></h1> <p> ist die am häufigsten verwendete Funktion von <code>AngularJS</code>. Lassen Sie uns die Wiederverwendung von Code im Frontend einfach implementieren. Die Essenz des Befehls liegt in der Interaktion zwischen dem inneren und dem äußeren Feld des Befehls <code>scope</code>. </p> <p>Bei diesem Artikel handelt es sich um eine Übersetzung eines Dokuments plus einige meiner eigenen Kenntnisse. Aufgrund meines begrenzten Niveaus kann es sein, dass einige Teile nicht reibungslos übersetzt werden können oder die Übersetzung möglicherweise falsch ist Mich. Die Verwendung und Beschreibung von <code>scope</code> in diesem Artikel wurden aus dem englischen Dokument <code>AngularJS</code> übersetzt: Offizielles Dokument von AngularJS. Der Wert des Attributs </p>, <p>, oder ist ein Objekt. <code>scope</code><code>false</code>false<code>true</code></p> <h2 id="Dies-ist-das-Standardattribut-der-Direktive">: Dies ist das Standardattribut der Direktive </h2>. Für die Direktive wird kein <p> erstellt . <code>false</code><code>scope</code>true<code>scope</code><code>scope</code></p>: Erstellt ein untergeordnetes Element <h2 id="für-die-Direktive-das-prototypisch-vom-übergeordneten-Element"> für die Direktive, das prototypisch vom übergeordneten Element </h2> erbt. <p><code>true</code>Objekt<code>scope</code><code>scope</code></p>: Erstellen Sie eine neue Isolation <h2 id="für-die-Direktive-Der-Unterschied-zwischen-Isolation"> für die Direktive. Der Unterschied zwischen Isolation </h2> und dem üblichen <p> ist: Isolation <code>{key: value}</code> folgt nicht das Elternteil <code>scope</code> Führen Sie eine prototypische Vererbung durch. <code>scope</code><code>scope</code> führt keine prototypische Vererbung vom übergeordneten Element durch <code>scope</code>. Dies ist nützlich für die Erstellung wiederverwendbarer Komponenten. Wiederverwendbare Komponenten sollten keine Eigenschaften vom übergeordneten Element lesen oder ändern. <code>scope</code></p> <p>Hinweis: Eine Direktive mit einer Isolation <code>scope</code>, aber ohne <code>scope</code> oder </p> wendet die Isolation <p> nicht auf ihre untergeordneten Elemente an. <strong>Das steht im Dokument, aber ich verstehe immer noch nicht, was es bedeutet. <code>scope</code><code>template</code>Vielleicht ist meine Übersetzung falsch, das Folgende ist der Originaltext: <code>templateUrl</code><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">Nach dem Login kopieren</div></div> <code>scope</code>Das Isolationsobjekt definiert eine lokale </strong>-Attributsammlung, die aus den Attributen des Direktivenelements stammt. </p> <p>Bereichsbindung</p> <p>Die folgenden Bindungen können alle Parameter hinzufügen. <code>scope</code></p>Beispiel: <h3><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">scope: {     name: '=nameAttr' }</pre><div class="contentsignin">Nach dem Login kopieren</div></div></h3> ist gebunden an: <p>. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">scope: {     name: '=' }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> ist gebunden an: </p>. <p><code><test name-attr="'hello'"></test></code>String-Bindung</p> <p><code><test name="'hello'"></test></code>/</p>: Binden Sie das lokale <h3 id="Attribut-an-den-Wert-des">-Attribut an den Wert des </h3>-Attributs. Das Ergebnis ist immer eine Zeichenfolge, da <p>Attribute sind Strings. Wenn sich der Attributwert <code>@</code> ändert, ändert sich auch das Attribut in der Direktive <code>@attr</code>, da dieses Attribut in seinem übergeordneten Attribut <code>scope</code> gelesen wird. <code>DOM</code><code>DOM</code>Zwei-Wege-Bindung <code>DOM</code><code>scope</code><code>scope</code>/</p>: Es wird eine bidirektionale Bindung zwischen der lokalen <h3 id="Eigenschaft-und-dem-an-die-Eigenschaft-übergebenen-Ausdruck-hergestellt-das-übergeordnete-Element">-Eigenschaft und dem an die Eigenschaft übergebenen Ausdruck hergestellt das übergeordnete Element </h3> Innerhalb des Bereichs berechnet. Wenn der gebundene Ausdruck nicht zuweisbar ist oder nicht optional ist, aber nicht in der Direktive übergeben wird, wird eine <p>-Ausnahme ausgelöst, da er nicht mit dem übergeordneten <code>=</code> synchronisiert werden kann. <code>=attr</code><code>scope</code>Standardmäßig wird die Methode <code>scope</code> normalerweise verwendet, um auf Änderungen zu warten und Gleichheitsurteile basierend auf der Adresse des Objekts durchzuführen. Wenn jedoch eine Objektadresse oder Array-Adresse an den Bindungsausdruck übergeben wird, besteht die Vergleichsmethode darin, festzustellen, ob die Werte gleich sind. Sie können auch <code>$compile:noassign</code>/<code>scope</code> und </p> für die flache Überwachung verwenden. <p><code>$watch</code>Ich verstehe diese Passage immer noch nicht ganz. Ich habe in <code>=*</code> eine verlässliche Antwort gefunden, aber ich verstehe sie immer noch nicht ganz. AngularJS =* Probleme <code>=*attr</code><code>$watchCollection</code> (Wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website </p>AngularJS-Lernhandbuch <p>, um mehr zu lernen) <code>StackOverflow</code></p>Einseitige Bindung<p><a href="http://www.php.cn/course/47.html" target="_blank"></a>/</p>: Stellen Sie eine unidirektionale Bindung zwischen dem lokalen <h3 id="und-dem-an-das-Attribut"> und dem an das Attribut </h3> übergebenen Ausdruck her. Alle Änderungen am Ausdruck am Attribut <p> werden im -Attribut, aber Änderungen am <code><</code>-Attribut werden nicht im Ausdruck des <code><attr</code>-Attributs widergespiegelt. <code>scope</code><code>DOM</code><code>DOM</code>Aber es gibt zwei Einschränkungen: <code>scope</code><code>scope</code><code>DOM</code>1. Bei der unidirektionalen Bindung wird der Wert des übergeordneten Elements </p> nicht auf das isolierte <p> kopiert, sondern einfach Einstellungen auf den gleichen Wert. Wenn Sie ein Objekt übergeben, werden Änderungen am Objekt im isolierten <strong> im übergeordneten </strong> widergespiegelt, da beide auf dasselbe Objekt verweisen. </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">Nach dem Login kopieren</div></div> <p>本篇文章到这就结束了（想看更多就到PHP中文网<a href="http://www.php.cn/course/47.html" target="_blank">angularjs学习手册</a>中学习），有问题的可以在下方留言提问</p> <p class="comments-box-content"></p>

Das obige ist der detaillierte Inhalt vonAngularJS Documentation Reading Scope Directive Wie viel wissen Sie? Detaillierte Erläuterung der Scope-Direktive beim Lesen von AngularJS-Dokumenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!