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

Answer 2

使用隔离范围，因此任何模型都只适用于该范围。之前的解决方案将问题带到＆＃34;如何从指令中获取数据？＆＃34;，两个解决方案：

将隔离范围与= bindings一起使用（请参阅$compile，范围部分）
使用活动发送信息

如何防止模特冲突？

2 个答案:

修正了演示：http://plnkr.co/edit/IZWZhwtfclZKMnnNNFA9?p=preview