javascript - Angular 输入格式化程序/解析器指令和内插属性？

Question

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

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

传递文字参数:

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

或从当前范围传递内插参数:

<input ng-model="foo" my-directive="{{bar}}" />

...
function MyCtrl($scope) {
  $scope.bar = "120";
}

如果我在我的指令定义中读取链接函数的属性参数，我可以在第一次使用中获得 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 来评估传递给指令的表达式。

Here's a quick fiddle .