如何在AngularJS中跨控制器和&amp ;;动态添加指令到所有输入元素。模块

时间:2016-10-17 07:04:10

标签: javascript angularjs angularjs-directive

我想动态地将指令添加到我所有控制器中的所有文本框中。形式。 我从这里得到了一个黑客:How to dynamically add a directive to an input element in AngularJS

但在我的情况下:大约有200多种形式分布在不同的控制器和模块和在任何地方添加它都会非常耗时。

有更轻松或更优雅的方式吗?

编辑:我想做什么? 我想删除所有领先&用户在所有输入框中输入的尾随空格。

3 个答案:

答案 0 :(得分:1)

Angular可以有多个具有相同名称的指令,并将它们全部应用于该元素。创建具有所需行为(demo)的另一个input指令:

  .directive('input', function($compile) {
    return {
      restrict: 'E',
      require: '?ngModel',
      link: function(scope, elem, attrs, ngModel) {
        if (!ngModel) {
          return;
        }

        ngModel.$parsers.push(function(value) {
          return value.trim();
        });
      }
    }
  });

答案 1 :(得分:0)

如果您的所有表单中都有任何公共类,则可以创建具有该类名称的控制器

.directive('form-class',function($compile){
    return{
        restrict: 'C',
        link: function(scope, elem, attrs){
        }
    }
})

答案 2 :(得分:0)

我用来解决问题的解决方案(Ori Dori的扩展答案):

app.directive('input', function () { 
    return {
        require: '?ngModel',
        link: function (scope, element, attr, ngModelCtrl) {

            if (ngModelCtrl) {

                if (element.attr('type') == 'radio' || element.attr('type') == "file" || 
                    element.attr('type') == "checkbox" || element.attr('type') == "submit")
                {
                    //ignore them                    
                    return;
                }

                element.bind("change", function () {
                    if (element.val()) {
                        ngModelCtrl.$setViewValue(element.val().trim());
                        ngModelCtrl.$render();
                    }
                });
            }
        }
    };
});