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

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)();
       }
    }
}

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

Answer 1

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

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

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

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

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

这样，当控制器 $scope 中的值发生更改时，您也会收到通知。