Question

有一个指令代表一个文本输入，在角度控制器中有一些附加功能。最大长度传递给指令，因此输入的输入文本可以基于该解析值限制在指令中。 最大长度将使用控制器变量确定，该变量将根据用户活动随时更改。该指令如下所示

<text-box-directive data-max-length="{{maxLength}}"></<text-box-directive>

这是指令

angular.module('common.directives')
    .directive('textBoxDirective', function ($parse) {

    return {
        scope: {
            // some additional scope variables
        },

        link: function (scope.element, attrs) {
            scope.maxLength = $parse(attrs.maxLength)();
       }
    }
}

由于 maxLength 变量用作属性，即使变量发生更改，指令值也不会在指令中更新。我希望在控制器值更改时更新此值，但仍需要 maxLength 变量作为指令的属性

Answer 1

首先，您不需要在代码中使用$parse。您应该接收插值。

现在，假设您的控制器maxLength中有一个变量$scope，并且您希望将其传递给您的指令。考虑到这一点，您在模板中使用了如下指令 -

<text-box-directive max-text-length="{{maxLength}}"></<text-box-directive>

现在在指令链接功能中，您可以使用以下代码获取属性值 -

link: function (scope, element, attrs) {
  attrs.$observe('maxTextLength', function (newValue) {
    scope.maxLength = newValue;
  });
}

这样，只要在控制器$scope中更改了值，您就会收到通知。

重新渲染控制器中指令属性值更改的指令

1 个答案: