角度输入格式化器/解析器指令和插值属性

Question

我正在尝试编写一个可配置指令，该指令应用于输入元素，该元素需要ngModel，并为ngModel添加了一个解析器和格式化程序函数。

我遇到的问题是，在支持ngModel绑定的同时，似乎无法将插值传递到指令中。例如，我希望能够以两种方式之一使用我的指令：

传递文字参数：

<input ng-model="foo" my-directive="120" />

或从当前范围传递插值参数：

<input ng-model="foo" my-directive="{{bar}}" />
...
function MyCtrl($scope) {
  $scope.bar = "120";
}

如果我在指令定义中读取链接函数的attributes参数，我可以在第一种用法中获得attributes.myDirective的值，但在第二种用法中，myDirective的数值是未定义的。

现在，如果我在指令定义中添加一个独立的作用域：

scope: { myDirective: '@' }

然后scope.myDirective在上面的场景中被定义和插值，但现在ngModel被破坏了。我的解析器/格式化程序函数的输入参数是未定义的。发生了什么，我如何实现我想要的行为？

指令：

module.directive('myDirective', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            replace: false,
            link: function (scope, elm, attrs, ctrl) { // attrs.myDirective not interpolated

Answer 1

当您添加隔离作用域时，您正在创建一个全新的子作用域，该子作用域不是从具有ngModel值的作用域继承的。这就是为什么您的解析器和格式化程序变得未定义的原因。

此外，在您的示例中，要获得bar的值，不需要使用大括号：

<input ng-model='foo' my-directive='bar' />

在你的链接功能中：

link: function(scope, element, attr, ctrl) {
  attr.myDirective == 'bar'.
  scope.$eval(attr.myDirective) == // whatever the value of 'bar' is in the current scope
}

所以您不需要隔离范围。只需使用scope.$eval来计算传递给指令的表达式。

这是一把快速小提琴。