JavaScript 防止在AngularJs中创建不必要的作用域

创造力是自律与童心的结合体。——<罗伯特·格林>

原文链接：https://www.jstips.co/en/angular/preventing-unwanted-scopes-creation-in-angularjs/

AngularJs 最受赞赏的特性之一是理解和阻止 ng-model 数据范围是你经常遇到的主要挑战之一。在处理 ng-model 数据时，ng-repeat 或 ng-if 过程可以创建新的不需要的作用域。看看下面的例子

<div ng-app>
  <input type="text" ng-model="data">
   <div ng-repeat="i in [1]">
       <input type="text" ng-model="data"><br/>
        innerScope:
   </div>
   outerScope:
</div>

在上面的例子中，innerScope 继承自 outerScope ，并在outerScope中传递值。如果你在 innerScope 中输入一个值，它将反映在 outerScope 中。但如果编辑outerScope, innerScope反映的值与 outerScope 不相同，因为 innerScope 创建了自己的字段，因此不再从 outerScope 继承。

为了防止这种情况发生，我们可以使用 “Controller As” 方法，而不是使用 scope 作为所有数据和函数的容器。但一个更引人注目的解决方案是保持所有的对象，如下面的例子-

<div ng-app>
  <input type="text" ng-model="data.text">
   <div ng-repeat="i in [1]">
       <input type="text" ng-model="data.text"><br/>
        inner scope:
   </div>
   outer scope:
</div>

现在 innerScope 不再创建新的字段，而在 innerScope 或 outerScope 中的编辑值将同时反映在innerScope和outerScope中。

参考

https://www.jstips.co/en/angular/preventing-unwanted-scopes-creation-in-angularjs/

关注【公众号】，了解更多。

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！

参考

FEATURED TAGS

FRIENDS