javascript - 如何更改 Controller 中的 CSS

Question

我正在尝试解决错误。当单击另一个复选框时，我只需要更改元素的 css 。但它不起作用。当我单击其他地方的其他按钮时它才起作用，但当我单击复选框时 View 可能不会刷新？ 有什么想法吗？

查看:

<input
    type="checkbox"  
    value="application.callback" id="telefonBox"
    ng-click="application.callback = !application.callback; toggleClass(application.callback)"
/>

Controller :

$scope.toggleClass = function(newValue) {
    var element = angular.element(document.querySelector('#additional'));

    if (newValue) {
        element.toggleClass("tooltip-agent tooltip-agentChecked ");
    } else {
        element.toggleClass("tooltip-agentChecked tooltip-agent");
    }
    $scope.$apply();
}

我尝试过但没有成功

$scope.$watch('$scope.application.callback', function (newValue, oldValue) {
    var element = angular.element(document.querySelector('#additional'));
    if (newValue) {
        element.toggleClass("tooltip-agent tooltip-agentChecked ");
    } else {
        element.toggleClass("tooltip-agentChecked tooltip-agent ");
    }

Answer 1

将ng-modal添加到复选框

<input type="checkbox" ng-model="application.callback">

和 ng-class 到您的 #additional 元素

<div id="additional" ng-class="{true:'tooltip-agent tooltip-agentChecked', false:'tooltip-agentChecked tooltip-agent'}[application.callback]"></div>