AngularJS

Question

我正在尝试根据条件在指令内动态地将 class 添加到输入标签。类似的东西：

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

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

有没有猜到我做错了什么？

Answer 1

更新

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

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>

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

AngularJS - applying class dynamically on $render inside a directive

javascript

render