Angular JS：将类添加到元素

Question

我在做下一件事。 我想在其边界突出显示的输入中输入空值（添加了新类“警告”）。 我创建了以下代码。

HTML：

`<body ng-app="TestPage">
 <form ng-controller="TestForm">
  <input ng-model="testinput" class="form-input" ng-class="testclass" type="text"/>
  <button ng-click="submitButton()">Click</button>
</form>
</body>`

JavaScript：

`angular.module('TestPage',[])
    .controller('TestForm', function($scope, $animate) {
         $scope.submitButton = function() {
             if (($scope.testinput == undefined) || ($scope.testinput == "")) {
                 $animate.addClass($scope.testclass, "warning");
             }
         };
    });`

但是addClass的使用不起作用。 我究竟做错了什么？

Answer 1

根据文件

服务$ animate的addClass函数具有三个参数；

第一个参数是CSS类将要应用的元素。

第二个参数是将要添加的CSS类（多个类之间用空格分隔）

第三参数是将应用于元素的选项/样式的可选集合。

因此，您应该尝试这样做：

的HTML：

`<body ng-app="TestPage">
 <form ng-controller="TestForm">
  <input id="target_element" ng-model="testinput" class="form-input" ng-class="testclass" type="text"/>
  <button ng-click="submitButton()">Click</button>
</form>
</body>`

javascript：

`angular.module('TestPage',[])
    .controller('TestForm', function($scope, $animate) {
         $scope.submitButton = function() {
             if (($scope.testinput == undefined) || ($scope.testinput == "")) {
                 $animate.addClass(angular.element('#target_element'), "warning");
             }
         };
    });`

更好的方法是使用指令 。

module.directive('addClassBy',['$animate',function($animate){
    return function(scope,element){
        scope.$watch('testinput',function(newValue,oldValue){
            if(newValue === oldValue){return};
            if(newValue === undefined || newValue === ''){
                 $animate.addClass(element,'warning')
            }
        })
    }
}])

然后html：

`<body ng-app="TestPage">
     <form ng-controller="TestForm">
      <input add-class-by ng-model="testinput" class="form-input" ng-class="testclass" type="text"/>
      <button ng-click="submitButton()">Click</button>
    </form>
    </body>`