Question

var app = angular.module('myApp', []);

app.controller('checkCtrl', ['$scope','sharedService', function($scope, sharedService) {
     $scope.isCutScore = function() {
        if($scope.cc) {
            alert('Checked');
            $scope.val = true;
        } else {
            alert('Unchecked');
        }
    };
}]);


app.controller('divCtrl', ['$scope', 'sharedService', function($scope, sharedService) {

    $scope.addClass = function() {
        if(flag == true) {
            return EL;
        } else {
            return EP;
        }
    };
}]);


app.service('sharedService', function() {
    var flag = false;
    if(angular.element('#cutScoreCheck').is(':checked')) {
        flag = true;
    } else {
        flag = false;
    }
});

单击复选框，使用ng-class在div中添加和删除类。但挑战是我们需要应用的复选框和div以及删除类是在不同的控制器中。这里的强制是使用由两个控制器共享的服务。在下面的示例中，如果我们选中复选框，则应该应用'EL'类，如果我们取消选中该框，则会删除此类并应该应用'EP'。

Code

Answer 1

你可以用它。作品here。

我已添加了服务功能，当用户选中复选框时会调用它，我使用$rootScope在不同的控制器中访问AddClass方法。

你的身体html

<body ng-app="myApp">
 <div class="row">
    <div class="col-sm-4 checkDiv" ng-controller="checkCtrl">
        <input type="checkbox" id="cutScoreCheck" ng-model="cc" ng-change="checkDiv()"/>
    </div>
 </div>
 <div class="row">
    <div class="col-sm-4 container" ng-controller="divCtrl" ng-class="flag ? 'EL' : 'EP'">500</div>
 </div>

  <script src="CtrlCheck.js"></script>

</body>

Js part：

var app = angular.module('myApp', []);

app.controller('checkCtrl', ['$scope','sharedService', '$rootScope',function($scope, sharedService,$rootScope) {

    $scope.checkDiv = function(){
       var flag = sharedService.CheckDiv($scope.cc);
       $rootScope.addClass(flag);

    }

}]);


app.controller('divCtrl', ['$scope', 'sharedService', '$rootScope',function($scope, sharedService,$rootScope,$apply) {
  $scope.flag = false;
    $rootScope.addClass = function(flag) {
        if(flag == 'true') {
            $scope.divClass =  "EL";
        } else {
          $scope.divClass =  "EP";
        }
        console.log(flag)
        $scope.flag = flag;
    };

}]);


app.service('sharedService', function() {
    var flag = false;

    this.CheckDiv = function (isChecked) {
      if(isChecked) {
            flag = true;
        } else {
            flag = false;
        }

        return flag;
  }

});

在复选框上使用service和ng-class单击

1 个答案: