javascript - 通过 ng-class 添加类时,angular.element 不起作用

标签 javascript angularjs jqlite

如果我通过 ng-class 添加一个类到一个元素,并尝试通过 Angular-element 获取同一类的存在,它总是返回 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 digest cycle 之前执行的开始。

目前: 1. 按下按钮 - 2. 执行 $scope.add - 3. 检查类 - 4. Angulars 摘要循环更改类

要解决此问题,请设置 $timeout,这会将您的 console.log 移至堆栈底部。

<强> Working fiddle here

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

}]);

关于javascript - 通过 ng-class 添加类时,angular.element 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29229335/

相关文章:

javascript - javascript getter 的 Jasmine 测试不起作用

javascript - addClass 隐藏在 ng-click angularJS 中

javascript - Angularjs 在创建 dom 元素时的性能,纯 js 与 jqlite

javascript - AngularJs 指令 : How to dynamically set attributes on ng-repeat element

javascript - 使用 json2html 将 json 对象转换为 html 表

javascript - 如果帖子 ID 等于 action.payload,则增加点赞数

javascript - 谷歌地图缩小限制

javascript - Vue.js 和 Vuetify 槽作用域

javascript - Angular 和 JavaScript : Date is 7 days old and is monday

angularjs - $stateProvider 没有按预期加载页面