4

我有一个指令可以ng-model用来暴露它的价值。

问题是这个指令的内部组件也会弄乱范围，所以我需要隔离它的范围，但仍然保留ng-model与外部世界的绑定。

我将如何实现这一目标？

这是指令：

angular.module('app', []).directive('myDirective', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      // do stuff using ngModel controller
    },
    replace: true,
    template: '<div><input ng-model="userInput" /></div>'
  };
});

<my-directive ng-model="prop"></my-directive>

如您所见，该指令必须prop作为其值公开，但不应userInput在定义于<input ng-model="userInput"/>.

我如何才能仅prop在父范围内提供？

4

1 回答 1

3

通常，ngModelController 旨在与不创建新范围的指令一起使用。我发现让它与隔离范围一起工作的唯一方法是在隔离范围中使用相同的名称：

scope: { prop: '=ngModel' }  // must use 'prop' here!

有关这方面的更多讨论，请参阅我的 SO 答案：https ://stackoverflow.com/a/14792601/215945

您还可以让指令使用scope: true. 如果您这样做，则prop需要是对象属性，而不是原始属性：例如，ng-model='someObj.prop'. 有关此方法的更多信息，请参阅此https://stackoverflow.com/a/13060961/215945的第一个小提琴

这仍然允许您在新指令子范围内创建自己的（新）属性，而不会影响父范围。好吧，您需要了解作用域原型继承在某种程度上是如何工作的——在父作用域上定义的对象将在指令子作用域中可见和可更改。 在父作用域上定义的基元将是可见的，但是如果您尝试更改父基元的值，您最终会创建一个隐藏/隐藏同名父属性的子属性。（更多关于原型继承的信息可以在这里找到。）

于 2013-03-12T18:41:39.950 回答