更新来自模型 Angular 的输入时的事件

Question

我有一个指令，我将其放入类型类的输入中。 我添加了模糊、焦点事件以了解何时进入和退出输入以产生标签的效果（材料设计），但是当我通过角度 ng-model 包装值时，我需要知道该字段已被填充。

有什么想法吗？

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

      // Any event here that can tell me that the value was changed by the angular so I can put the css class

      element.bind('blur', function (e) {
        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) {
        input = angular.element(e.currentTarget);
        input.parent().addClass('active');
      });

    }
  };
});

Answer 1

您可以添加观察者并添加类，而不是在绑定中添加filled 类。请参考以下示例。在类中使用颜色来表示它们被添加。

var app = angular.module('myApp', []);

app.controller('MyController', ['$scope', MyController]);    

function MyController($scope) {
    $scope.name = 'World';
    $scope.name2 = 'hello';
}
app.directive('formControl', function() {
  return {
    restrict: 'C',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {

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

      // Any event here that can tell me that the value was changed by the angular so I can put the css class
      element.bind('blur', function (e) {
        input = angular.element(e.currentTarget);
        input.parent().removeClass('active');
      }).bind('focus', function (e) {
        input = angular.element(e.currentTarget);
        input.parent().addClass('active');
      });
      scope.$watch(function(){return ngModel.$viewValue;}, function(newValue){
        if('required' in attrs){
          if(newValue){
            element.parent().addClass('filled');
          } else {
            element.parent().removeClass('filled');
          }
        }
      })

    }
  };
});

.filled{
  background-color:lightblue;
}
.active{
  border:1px solid red;
}

<div ng-controller='MyController' ng-app="myApp">
    <label> The below input does not have required attribute</label>
    <input type="text" class="form-control" ng-model="name">
    <br>
    <br>
    <label> The below input has required attribute</label>
    <input type="text" class="form-control" required ng-model="name2">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

另外，如果您想显示一条错误消息，就像您在 ng-messages 中看到的那样。

var app = angular.module('myApp', []);

app.controller('MyController', ['$scope', MyController]);    

function MyController($scope) {
    $scope.name = 'World';
    $scope.name2 = 'hello';
}
app.directive('formControl', function() {
  return {
    restrict: 'C',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {

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

      // Any event here that can tell me that the value was changed by the angular so I can put the css class
      element.bind('blur', function (e) {
        input = angular.element(e.currentTarget);
        input.parent().removeClass('active');
      }).bind('focus', function (e) {
        input = angular.element(e.currentTarget);
        input.parent().addClass('active');
      });
      scope.$watch(function(){return ngModel.$viewValue;}, function(newValue){
        if('required' in attrs){
          if(newValue){
            element.parent().addClass('filled');
          } else {
            element.parent().removeClass('filled');
          }
        }
      })

    }
  };
});

.filled{
  background-color:lightblue;
}
.active{
  border:1px solid red;
}
div.filled > .error-message{
  display:none;
}
div:not(.filled) > .error-message{
  display:block;
}
.error-message{
  text-align:center;
  margin-top:5px;
}

<div ng-controller='MyController' ng-app="myApp">
    <label> The below input does not have required attribute</label>
    <input type="text" class="form-control" ng-model="name">
    <br>
    <br>
    <label> The below input has required attribute</label>
    <input type="text" class="form-control" required ng-model="name2">
    <div class="error-message"> This Field is required</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

我希望这能解决你的问题:)