javascript - 如何防止模型冲突？

Question

在此示例中，我重现了两个指令对 ng-model 使用相同名称并且导致其输入中的值链接的情况。

http://plnkr.co/edit/aF5DtMVyQ27Rgb7ximEw?p=preview

代码:

var app = angular.module('app', []);

app.directive('formOne', function() {
  return {
    'restrict': 'E',
    'template': "<form name='formOne'><input type='text' ng-model='myValue'></form>"
  };
});

app.directive('formTwo', function() {
  return {
    'restrict': 'E',
    'template': "<form name='formTwo'><input type='text' ng-model='myValue'></form>"
  };
});
app.controller('MyController', function($scope) {
  //stuff
});

HTML:

  <div ng-controller='MyController'>
    <h1>Input something</h1>
    <form-one></form-one>
    <form-two></form-two>
  </div>

预防此类事情的常规方法是什么？非常感谢官方资源的链接。还可以有一些官方命名约定 - 他们也会受到赞赏

Answer 1

这正是您想要使用 isolated scopes 的情况。为了您的指示。

app.directive('formOne', function() {
    return {
        scope: true,
        restrict: 'E',
        template: "<form name='formOne'><input type='text' ng-model='myValue'>{{myValue}}</form>"
    };
});

修复演示:http://plnkr.co/edit/IZWZhwtfclZKMnnNNFA9?p=preview