javascript - AngularJS - 在指令内的 $render 上动态应用类

Question

我正在尝试根据指令内的条件动态地将类添加到输入标记。类似这样的事情:

return {
  restrict: 'A',
  require: 'ngModel',
  link: function (scope, element, attrs, model) {
    model.$render = function () {

    if (verify(model.$modelValue)) {
        var elm = getElm(element)

        elm.addClass('default');
      } 
    } 
  }

但是如果元素是输入，则该值不会显示在 View 中。

你猜我做错了什么吗？

Answer 1

更新

根据评论中更新的要求，我们可以添加异步验证器来添加类。

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

app.controller('MyController', function MyController($scope) {
    $scope.test = "asdf";
  })
  .directive('checkAvailability', function checkAvailabilityFunc($q) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attr, ngModel) {
        ngModel.$asyncValidators.userExist  = function(modelValue, viewValue) {
          var deferred = $q.defer();
          if (modelValue === 'asdf') {
            element.parent().addClass('default');
            deferred.resolve();
          } else {
            element.parent().removeClass('default');
            deferred.reject();
          }
          return deferred.promise;
        }
      }
    }
  });

.default {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div style="padding:10px;display:inline-block;">
    <input type="text" ng-model="test" check-availability>
  </div>
</div>

<小时/>

我不确定您为什么要使用复杂的 $render 来满足此要求，请检查我下面的示例，我们可以使用 ng-class 并实现相同的效果。要了解有关 ng-class 的更多信息，请访问 here

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

app.controller('MyController', function MyController($scope) {
  $scope.test = "asdf";
});

.default {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <input type="text" ng-model="test" ng-class="{ 'default' : test === 'asdf' }">
</div>