Javascript 基于服务变量更改CSS

我对Angular不太熟悉，但这似乎是一种“Angular方式”，尽可能避免DOM操作。我不确定我是否采取了正确的方法

我在底部有三个按钮（下一个、后一个和主页）。这些功能通过其他控制器的操作来启用和禁用。例如，如果文本框为空，则在输入内容之前，“下一步”按钮将被禁用。我有以下资料：

    <div ng-controller="nextBackController" class="navbar navbar-app navbar-absolute-bottom">
        <div class="btn-group justified">
          <a href="#/" class="btn btn-navbar btn-icon-only btn-bounded"><i class="fa fa-arrow-left fa-navbar" ng-class="{'btn-disabled' : btnBack}"></i> Back</a>
          <a id="btnHome" ng-click="handleClick()" href="#/" class="btn btn-navbar btn-icon-only btn-bounded" ng-class="{'btn-disabled' : btnHome}"><i class="fa fa-home fa-navbar"></i> Home</a>
          <a href="#/second" class="btn btn-navbar btn-icon-only">Next <i class="fa fa-arrow-right fa-navbar" ng-class="{'btn-disabled' : btnNext}"></i></a>
        </div>
    </div>

现在控制器：

//####################### - Next Back Controller ########################
app.controller("nextBackController",
    function($scope, nxtBackClick, bottomButtonWatcher){

        $scope.btnHome = bottomButtonWatcher.btnHome;
        $scope.btnNext = bottomButtonWatcher.btnNext;
        $scope.btnBack = bottomButtonWatcher.btnBack;

        $scope.handleClick = function(btn) {
            nxtBackClick.broadcast(btn);
        };
    }

);

---

同时具有class属性和ng class属性可能会有问题。它们都应该压缩为一个ng类属性。您已经在传递一个对象，所以只需向其添加另一个属性即可。通过将类的属性设置为true，可以完成始终显示类的设置

<div ng-controller="nextBackController" class="navbar navbar-app navbar-absolute-bottom">
    <div class="btn-group justified">
      <a href="#/" class="btn btn-navbar btn-icon-only btn-bounded">
         <i ng-class="{'fa fa-arrow-left fa-navbar': true, 'btn-disabled' : btnBack}"></i>      
         Back
      </a>
      <a id="btnHome" ng-click="handleClick()" href="#/" ng-class="{'btn btn-navbar btn-icon-only btn-bounded':true, 'btn-disabled' : btnHome}">
         <i class="fa fa-home fa-navbar"></i>
         Home
      </a>
      <a href="#/second" class="btn btn-navbar btn-icon-only">
         Next 
         <i class="" ng-class="{'fa fa-arrow-right fa-navbar':true, 'btn-disabled' : btnNext}"></i>
      </a>
    </div>
</div>

---

您使用的是$rootScope。$broadcast，但没有人在收听，您的控制器中需要有一个能够实际控制按钮的示波器：

 //####################### - Next Back Controller ########################
app.controller("nextBackController",
    function($scope, nxtBackClick, bottomButtonWatcher){

        $scope.btnHome = bottomButtonWatcher.btnHome;
        $scope.btnNext = bottomButtonWatcher.btnNext;
        $scope.btnBack = bottomButtonWatcher.btnBack;

        $scope.handleClick = function(btn) {
            nxtBackClick.broadcast(btn);
        };

        $scope.$watch('bottomBtnClick', function(buttonVal){
             $scope[buttonVal] = true;
        });
    }

);

---

您的问题到底是什么？此代码是否不起作用？“角度方式”并不特别阻止DOM操作，但更喜欢通过使用指令来完成。当我更新bottomButtonWatcher.btnNext时，我不认为$scope.btnNext也在更新，从而触发CSS更改bottomBtnClick广播事件在另一个控件中被监控（因为单击“下一步”时，每个控制器将执行不同的操作）。我只想监控bottomButtonWatcher.btnNext变量并适当更改$scope.btnNext变量。我想我的观点是，如果您只是在控制器中为底部按钮实现一个监视程序，您不需要一个只维护这些变量的服务。有意义吗？

 //####################### - Next Back Controller ########################
app.controller("nextBackController",
    function($scope, nxtBackClick, bottomButtonWatcher){

        $scope.btnHome = bottomButtonWatcher.btnHome;
        $scope.btnNext = bottomButtonWatcher.btnNext;
        $scope.btnBack = bottomButtonWatcher.btnBack;

        $scope.handleClick = function(btn) {
            nxtBackClick.broadcast(btn);
        };

        $scope.$watch('bottomBtnClick', function(buttonVal){
             $scope[buttonVal] = true;
        });
    }

);