Directive sur la portée de lecture de la documentation AngularJS Que savez-vous ? Explication détaillée de la directive scope dans la lecture du document angulairejs

<h1 id="span-style-font-size-px-span-style-font-size-px-Cet-article-présente-principalement-la-directive-scope-pour-la-lecture-de-documents-a-href-http-www-php-cn-course-html-target-blank-angularjs-a-Cet-article-explique-en-détail-l-utilisation-complète-de-la-directive-scope-pour-la-lecture-de-documents-angulairejs-Jetons-un-coup-d-œil-à-cet-article-maintenant-La-commande-span-br-span"><span style="font-size: 16px;"><span style="font-size: 14px;">Cet article présente principalement la directive scope pour la lecture de documents <a href="http://www.php.cn/course/47.html" target="_blank">angularjs</a> Cet article explique en détail l'utilisation complète de la directive scope pour la lecture de documents angulairejs. Jetons un coup d'œil à cet article maintenant. La commande </span><br></span></h1> <h1 id="span-style-font-size-px-scope-span"><span style="font-size: 16px;">scope</span></h1> <p> est la fonction la plus couramment utilisée de <code>AngularJS</code>. Implémentons facilement la réutilisation du code dans le frontend. L'essence de la commande réside dans l'interaction entre les champs intérieurs et extérieurs de la commande <code>scope</code>. </p> <p>Cet article est une traduction d'un document plus une partie de ma propre compréhension de celui-ci. En raison de mon niveau limité, certaines parties peuvent ne pas être traduites correctement ou la traduction peut être erronée. Tout le monde est invité à critiquer et à corriger. moi. L'utilisation et la description de <code>scope</code> dans cet article sont traduites du document <code>AngularJS</code> anglais Adresse du document : document officiel AngularJS. La valeur de l'attribut </p> <p><code>scope</code> peut être <code>false</code>, , ou est un objet. <code>true</code></p>false<h2></h2> <p> : C'est l'attribut par défaut de la directive <code>false</code> Un <code>scope</code> ne sera pas créé pour la directive. Cette directive utilisera son parent <code>scope</code>. . <code>scope</code></p>true<h2></h2> <p> : crée un enfant <code>true</code> pour la directive qui hérite de manière prototypique du parent <code>scope</code>. <code>scope</code></p>Objet<h2></h2> <p> : Créer un nouvel isolement <code>{key: value}</code> pour la directive La différence entre l'isolement <code>scope</code> et l'habituel <code>scope</code> est : l'isolement <code>scope</code> ne suit pas. le parent <code>scope</code>Faire l'héritage prototypique. <code>scope</code></p> ne fait pas d'héritage prototypique à partir du parent <p> Ceci est utile pour créer des composants réutilisables. Les composants réutilisables ne doivent pas lire ou modifier les propriétés du parent <code>scope</code>. <code>scope</code></p> <p>Remarque : Une directive avec un isolement <strong> mais aucun <code>scope</code> ou <code>template</code> n'appliquera pas l'isolement <code>templateUrl</code> à ses éléments enfants. <code>scope</code>C’est ce qui est écrit dans le document, mais je ne comprends toujours pas ce que cela signifie. </strong></p>Peut-être que ma traduction est fausse, voici le texte original : <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">Copier après la connexion</div></div>L'objet d'isolation définit une collection d'attributs <p> locale provenant des attributs de l'élément directive. <code>scope</code></p>liaison de portée<h3></h3>Les liaisons suivantes peuvent toutes ajouter des paramètres. <p></p> Exemple : <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">Copier après la connexion</div></div> est lié à : <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">Copier après la connexion</div></div> est lié à : <p>. <code><test name="'hello'"></test></code></p>Liaison de chaîne<h3></h3> <p>/<code>@</code> : Liez l'attribut <code>@attr</code> local à la valeur de l'attribut <code>scope</code> Le résultat est toujours une chaîne car <code>DOM</code>Attributs. sont des chaînes. À mesure que la valeur de l'attribut <code>DOM</code> change, l'attribut de la directive <code>DOM</code> changera également, car cet attribut est lu sur son parent <code>scope</code>. <code>scope</code></p> Liaison bidirectionnelle <h3></h3> <p>/<code>=</code> : Une liaison bidirectionnelle est établie entre la propriété <code>=attr</code> locale et l'expression transmise à la propriété. le parent <code>scope</code> Calculé dans la plage. Si l'expression liée n'est pas attribuable, ou si elle n'est pas facultative mais n'est pas transmise dans la directive, une exception <code>scope</code> sera levée car elle ne peut pas être synchronisée avec le parent <code>$compile:noassign</code>. <code>scope</code></p>Par défaut, la méthode <p> est généralement utilisée pour écouter les changements et effectuer des jugements d'égalité en fonction de l'adresse de l'objet. Cependant, si une adresse d'objet ou une adresse de tableau est transmise dans une expression liée, la comparaison consiste à vérifier si les valeurs sont égales. Vous pouvez également utiliser <code>$watch</code>/<code>=*</code> et <code>=*attr</code> pour une surveillance superficielle. <code>$watchCollection</code></p> Je ne comprends toujours pas bien ce passage. J'ai trouvé une réponse fiable dans <p>, mais je ne le comprends toujours pas bien. AngularJS =* Problèmes <code>StackOverflow</code></p> (Si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois <p>manuel d'apprentissage d'angularjs <a href="http://www.php.cn/course/47.html" target="_blank"> pour apprendre) </a></p>Liaison unidirectionnelle<h3></h3> <p>/<code><</code> : établissez une liaison unidirectionnelle entre le <code><attr</code> local et l'expression transmise à l'attribut <code>scope</code>. Toutes les modifications apportées à l'expression sur l'attribut <code>DOM</code> seront reflétées dans le <.> attribut. , mais les modifications apportées à l'attribut <code>DOM</code> ne seront pas reflétées dans l'expression de l'attribut <code>scope</code>. <code>scope</code><code>DOM</code></.></p>Mais il y a deux mises en garde : <p><strong></strong>1. La liaison unidirectionnelle ne copie pas la valeur du parent </p> vers le <p> isolé, mais simplement. paramètres à la même valeur. Si vous transmettez un objet, les modifications apportées à l'objet sur le <code>scope</code> isolé seront reflétées sur le <code>scope</code> parent car les deux font référence au même objet. <code>scope</code></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">Copier après la connexion</div></div> <p>本篇文章到这就结束了（想看更多就到PHP中文网<a href="http://www.php.cn/course/47.html" target="_blank">angularjs学习手册</a>中学习），有问题的可以在下方留言提问</p> <p class="comments-box-content"></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!