Question

我是Angular的新手，但它似乎是＆＃34; Angular方式＆＃34;尽可能避免DOM操作。我不确定我是否采取了正确的方法。

底部有三个按钮（下一个，后一个和主页）。这些通过其他控制器的操作启用和禁用。例如，如果文本框为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

同时具有类属性和ng-class属性可能会有问题。它们都应该压缩成一个ng-class属性。您已经传递了一个对象，因此只需添加另一个属性即可。设置始终显示的类是通过将其属性设置为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。$ 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;
        });
    }

);

根据服务变量更改CSS

2 个答案: