Portée de la directive de lecture de documents AngularJS

<p>Cet article présente principalement la commande scope pour la lecture de documents AngularJS, qui a une certaine valeur de référence. Maintenant, je la partage avec vous. Les amis dans le besoin peuvent se référer à la commande </p> <h1>scope</h1> <p>. C'est <code>AngularJS</code> la fonction la plus couramment utilisée, nous permettant d'implémenter 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ème<code>StackOverflow</code></p>Liaison unidirectionnelle<h3></h3> <p>/<code><</code> : Établissement d'une liaison unidirectionnelle entre le <code><attr</code> local et l'expression transmise à l'attribut <code>scope</code> Il est déterminé que tous les changements dans l'expression de l'attribut <code>DOM</code> seront reflétés dans l'attribut <code>DOM</code>, mais les changements dans l'attribut <code>scope</code> ne seront pas reflétés dans l'expression de l'attribut <code>scope</code>. <code>DOM</code></p> <p>Mais il y a deux mises en garde : <strong></strong></p>1. La liaison unidirectionnelle ne copie pas la valeur du parent <p> vers le <code>scope</code> 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>2. La liaison unidirectionnelle surveille les modifications de l'adresse de la valeur parent. Cela signifie que <p> sur la valeur parent ne prendra effet que si l'adresse référencée change. Dans la plupart des cas, il n’y a pas de quoi s’inquiéter. Mais il faut savoir que si vous liez un objet dans un sens, alors l'objet sur l'isolation <code>$watch</code> sera modifié. Si vous modifiez une propriété de l'objet sur le parent <code>scope</code>, cette modification ne sera pas transmise au. isolement <code>scope</code>, car l'adresse de cet objet n'a pas changé sauf si vous attribuez un nouvel objet. <code>scope</code></p>La liaison unidirectionnelle est utile si vous n'avez pas l'intention de propager les modifications du <p> isolé au nœud parent. <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">Copier après la connexion</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>

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!