Geltungsbereich der AngularJS-Dokumentleserichtlinie

<p>In diesem Artikel wird hauptsächlich der Scope-Befehl zum Lesen von AngularJS-Dokumenten vorgestellt, der einen bestimmten Referenzwert hat. Jetzt können Freunde in Not auf den Befehl </p> <h1>scope</h1> <p> verweisen. Es ist <code>AngularJS</code> die am häufigsten verwendete Funktion, die es uns ermöglicht, die Wiederverwendung von Code im Frontend einfach zu 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 Erkenntnisse. 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>: 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> 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> 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>-Attribut an den Wert des </h3>-Attributs. Das Ergebnis ist immer ein String, weil <p>Attribute sind Strings. Wenn sich der Wert des <code>@</code>-Attributs ändert, ändert sich auch das Attribut in der Direktive <code>@attr</code>, da dieses Attribut in seinem übergeordneten <code>scope</code> gelesen wird. <code>DOM</code><code>DOM</code>Zwei-Wege-Bindung <code>DOM</code><code>scope</code><code>scope</code>/</p>: Eine bidirektionale Bindung wird zwischen der lokalen <h3>-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 einen Bindungsausdruck übergeben wird, erfolgt der Vergleich durch die Prüfung, 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 =* Problem<code>=*attr</code><code>$watchCollection</code>Einseitige Bindung</p> <p><code>StackOverflow</code>/</p>: Einrichten einer unidirektionalen Bindung zwischen dem lokalen <h3> und dem an das </h3>-Attribut übergebenen Ausdruck. Es wurde festgestellt, dass Alle Änderungen am Ausdruck des Attributs <p> werden im Attribut <code><</code> widergespiegelt, Änderungen am Attribut <code><attr</code> werden jedoch nicht im Ausdruck des Attributs <code>scope</code> widergespiegelt. <code>DOM</code><code>DOM</code><code>scope</code>Aber es gibt zwei Einschränkungen: <code>scope</code><code>DOM</code></p>1. Bei der unidirektionalen Bindung wird der Wert des übergeordneten Elements <p> nicht auf das isolierte <strong> kopiert, sondern einfach Einstellungen auf den gleichen Wert. Wenn Sie ein Objekt übergeben, werden Änderungen am Objekt im isolierten </strong> im übergeordneten </p> widergespiegelt, da beide auf dasselbe Objekt verweisen. <p><code>scope</code>2. Die unidirektionale Bindung überwacht Änderungen in der übergeordneten Wertadresse. Das bedeutet, dass <code>scope</code> für den übergeordneten Wert nur dann wirksam wird, wenn sich die referenzierte Adresse ändert. In den meisten Fällen besteht kein Grund zur Sorge. Sie müssen jedoch wissen, dass, wenn Sie ein Objekt in eine Richtung binden, das Objekt auf der Isolation <code>scope</code> geändert wird. Wenn Sie eine Eigenschaft des Objekts auf dem übergeordneten Objekt <code>scope</code> ändern, wird diese Änderung nicht an das Objekt weitergegeben Isolation </p>, da sich die Adresse dieses Objekts nicht geändert hat, es sei denn, Sie weisen ein neues Objekt zu. <p><code>$watch</code>Einseitige Bindung ist nützlich, wenn Sie nicht beabsichtigen, die Änderungen des isolierten <code>scope</code> an den übergeordneten Knoten weiterzugeben. <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">Nach dem Login kopieren</div></div> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p> <p>相关推荐：</p> <p class="comments-box-content"><a title="AngularJS 表格导出添加额外信息" href="//m.sbmmt.com/js-tutorial-406294.html" target="_blank">AngularJS 表格导出添加额外信息</a><br></p> <p class="mt20 ad-detail-mm hidden-xs"><a title="angularjs的数据绑定" href="//m.sbmmt.com/js-tutorial-406293.html" target="_blank">angularjs的数据绑定</a><br></p>

Das obige ist der detaillierte Inhalt vonGeltungsbereich der AngularJS-Dokumentleserichtlinie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!