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

Question

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

<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。您应该收到一个内插值。

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

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

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

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

这样，只要控制器中的值发生变化，您也会收到通知 $scope。

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

Re-Render the directive for directive attribute value change in controller

angularjs

directive