通过更改ngModel更新父元素的类

时间:2016-07-08 11:20:18

标签: angularjs angularjs-directive

我想做...,

如果 ng-model 不等于空白,则更新其上面的类 ng-model

我已经覆盖了 ngModel 指令。通过将$ watch应用于 ngModel ,我也可以对其进行更改。但我坚持这一点,如何获得这个位置。

我可以尝试 ng-class 来改变它,但我想要一些可以全局更新的东西。

app.directive('ngModel', function($http ,$parse) {
    return {
        restrict: 'A',
        scope: {
            model: '=ngModel'
        },
        link: function(scope, element, attrs) {
            scope.$watch("model", function() {
                console.log(scope.model);
            });
        }
    }
});

这是示例HTML。在这里,我试图通过检测其模型的变化来改变该跨度类。

<span class="input">
    <input class="input__field" ng-model="example" required="" type="text">
</span>

2 个答案:

答案 0 :(得分:0)

尝试使用element函数的link参数,如下所示

app.directive('ngModel', function($http ,$parse) {
    return {
        restrict: 'A',
        scope: {
            model: '=ngModel'
        },
        link: function(scope, element, attrs) {

            scope.$watch("model", function() {
                element.parent()[0].className='Your class name'
                console.log(scope.model);
            });
        }
    }
});

答案 1 :(得分:0)

我的解决方案在模型控制器上使用$viewChangeListeners

angular.module('scopePropertiesModule', [])
  .directive('ngModel', function($timeout){
    return {
      restrict: 'A',
      require: 'ngModel',
      compile: function(){
        return {
            pre:function(scope, $elem){

            $elem.wrap("<div class='o-input'></div>")
              .parent();

          },
          post:function(scope, $elem, attrs, ctrl){

            var checkValid = function(e){
                $timeout(function(){

                if(ctrl.$valid){
                  $elem.parent().addClass('valid');
                }else{
                  $elem.parent().removeClass('valid');
                }

              });
            };

            ctrl.$viewChangeListeners.push(checkValid);
            checkValid();

          }

        }

      },
            scope: {
            model: '=ngModel'
      }
  }});

请参阅此处的小提琴http://jsfiddle.net/robstarbuck/t7ufn3u1/

必须使用$ timeout。