angular元素在通过ng类添加类时不起作用

angular.element not works when class is added through ng-class

本文关键字：添加 不起作用 ng 元素 angular      更新时间：2023-09-26

如果我通过ng类向元素添加一个类，并试图通过angular元素获得同一类的存在性，那么它总是返回false。

请让我知道下面的代码有什么问题，

html:

<body ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-class="{'red':required == true}"/>
<button ng-click="add()">click</button>
</div>
</body>

css：

.red {border: 1px solid #ff0000;}

javascript:

var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope){
var elem = angular.element(document.querySelector('input'));
$scope.required = false;
$scope.add = function(){
$scope.required = true;
console.log(elem.hasClass('red'));
}    });

问题是在回调函数中检查.hasClass，这是在angulars摘要循环开始之前执行的。

因此，目前：1.按下按钮-2$scope.add已执行-3。类已检查-4。Angulars消化周期变化等级

为了解决这个设置，$timeout将把console.log移动到堆栈的底部。

在这里工作

var myApp = angular.module('myApp',[]);
myApp.controller("myController", ['$scope', '$timeout', function($scope, $timeout){
    var elem = angular.element(document.querySelector('input'));
    $scope.required = false;
    $scope.add = function(){
        $scope.required = true;
        $timeout(function(){
            console.log(elem, elem.hasClass('red'));
        }, 0);
    }
}]);
相关文章：