Question

我有一个使用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？

Answer 1

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

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

有关此问题的更多讨论，请参阅我的答案：https://stackoverflow.com/a/14792601/215945

您还可以使用scope: true指令创建新范围。如果你这样做，那么prop将需要是一个对象属性，而不是一个原语：例如ng-model='someObj.prop'。有关此方法的更多信息，请参阅此https://stackoverflow.com/a/13060961/215945

的第一个小提琴

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

隔离指令范围但保留对ngModel的绑定

1 个答案: