Question

我有以下代码的指令

 app.directive('formControl', function () {
        return {
            restrict: 'C',
            link: function (scope, element, attrs) {

                // Add class filled to form-control's that have a value
                if (element.val()) {
                    element.parent().addClass('filled');

                }

                element.bind('blur', function (e) {
                    var input = angular.element(e.currentTarget);
                    if (input.val()) {
                        input.parent().addClass('filled');
                    } else {
                        input.parent().removeClass('filled');
                    }
                    input.parent().removeClass('active');
                }).bind('focus', function (e) {

                    var input = angular.element(e.currentTarget);
                    input.parent().addClass('active');
                }).bind('change',function(e) {
                   // Add class filled to form-control's that have a value
                    var input = angular.element(e.currentTarget);
                    input.parent().addClass('active');
                } );

            }
        };
    });

//示例指令

    <div class="form-group">
       <label for="lastname" class="control-label">Phone number</label>
     <input type="text" class="form-control" name="phonenumber"  id="phonenumber" ng-model="user.phone_number" required maxlength="75">
   </div>

这个指令的目的非常简单，根据几个事件和值状态向目标对象添加一些css类。

如果没有任何值，该指令将正常工作。但如果我有一个通过模型绑定填充的值（不是来自键盘，通过模型绑定）。它不会工作。

IE中。我想执行代码“input.parent（）。addClass（'active'）;”当指令/输入字段通过模型绑定

填充值时

我尝试过更改事件，但它无法正常工作

Answer 1

我认为您需要的是以某种方式获取ng-model设置的绑定并在模型更改时做出反应。 ng-model公开了NgModelController，后者又公开了模型值，您可以$watch。像这样：

 app.directive('formControl', function () {
    return {
        restrict: 'C',
        require: '?ngModel',  // the (optional) ng-model on the same element
        link: function (scope, element, attrs, ngModel) {

            [...]

            if (ngModel) {
                scope.$watch(function() {
                    return ngModel.$modelValue;
                }, function(newValue, oldValue) {
                    input.parent().addClass('active');
                })
            }
        }
    };
});

如何在模型绑定后重新运行指令的链接功能

1 个答案: