根據服務變量更改CSS

Question

我是Angular的新手，但它似乎是儘可能避免DOM操作的「角度方式」。我不確定我是否採取了正確的方法。

我在底部有三個按鈕（next，back和home）。這些通過其他控制器的動作獲得啓用和禁用。例如，如果文本框爲NULL，則在輸入內容之前下一個按鈕將被禁用。我有以下幾點：

<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> 

現在的JS：

app.service("nxtBackClick", function($rootScope, bottomButtonWatcher) { 

    this.btn = ""; 

    this.broadcast = function(btn) { 
     //Toggle the Next button as an example 
     bottomButtonWatcher.btnNext = ~bottomButtonWatcher.btnNext; 

     //set the btn that is clicked 
     this.btn = btn; 
     $rootScope.$broadcast('bottomBtnClick'); 
    }; 
}); 

app.service("bottomButtonWatcher", function($rootScope) { 

    //Set all these to disabled 
    this.btnHome = true; 
    this.btnNext = false; 
    this.btnBack = true; 

}); 

而現在的控制器：

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

); 

Answer 1

同時具有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> 

Answer 2

您使用$ rootScope $廣播，但沒有人在聽，你需要在你的控制器範圍觀察家實際控制按鈕：

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

);