Javascript 在复选框上使用服务和ng类单击
单击复选框时使用ng类将类添加到div并将其删除。但挑战是我们需要应用和删除类的checkbox和div位于不同的控制器中。这里的强制是使用由两个控制器共享的服务。 在下面的示例中，如果我们选中复选框，则应应用“EL”类，如果取消选中该复选框，则将删除该类并应用“EP” 您可以使用这个。工作 我已将函数添加到服务中，当用户选中复选框时将调用该函数，并且我使用Javascript 在复选框上使用服务和ng类单击,javascript,jquery,angularjs,angular-services,ng-class,Javascript,Jquery,Angularjs,Angular Services,Ng Class,单击复选框时使用ng类将类添加到div并将其删除。但挑战是我们需要应用和删除类的checkbox和div位于不同的控制器中。这里的强制是使用由两个控制器共享的服务。 在下面的示例中，如果我们选中复选框，则应应用“EL”类，如果取消选中该复选框，则将删除该类并应用“EP” 您可以使用这个。工作 我已将函数添加到服务中，当用户选中复选框时将调用该函数，并且我使用$rootScope在不同的控制器中访问AddClass方法 你的身体 var app = angular.module('myApp',
$rootScopevar 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类中，我渴望拥有一个有条件的ng类。此外，“EL”和“EP”类也不会在单击时添加@hasan@SailyJadhav我已经更新了答案，你能再查一下吗。。这就是我所期望的……）只是出于好奇。。我们可以跳过$rootScope的使用吗。根据良好实践，仅使用服务和工厂@hasanIn在这种情况下，您需要在调用服务方法后触发另一个控制器方法，并且控制器的作用域之间没有父子关系，然后您可以将$rootScope注入控制器，以便从不同的控制器调用方法
<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>
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;
}
});