我一直在尝试使用 $broadcast 和 $on 但我无法让数据在两个控制器之间移动。
在我的主网页上,我有一个按钮,每次点击它时都会向 var 添加 4:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="app">
<div ng-controller="mainCtrl">
<button ng-click="add(4)"> 4 </button>
</div>
<script src="../Scripts/angular.js"></script>
<script src="../assets/js/angular-grid.js"></script>
<script src="../assets/controller/gods_controller.js"></script>
<script src="../Scripts/angular-animate.js"></script>
</body>
</html>
在我的 mainCtrl 中,我有函数 add() 并使用 $broadcast 来广播我的值:
var module = angular.module("app", ["angularGrid", "ngAnimate"])
module.controller("mainCtrl", function ($scope, $rootScope) {
var total = 0
$scope.add = function (x) {
total += x;
$rootScope.$broadcast('totalBroadcast', total)
}
});
然后我的弹出窗口有第二个控制器,使用 $on 接收广播:
module.controller('popUpCtrl', function ($scope) {
$scope.$on('totalBroadcast', function(events, args){
$scope.total = args;
})
})
然后我的弹出 HTML 使用第二个控制器和 $scope.total 作为表达式:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="app">
<div ng-controller="popUpCtrl">
<p>The total is: {{total}}</p>
</div>
<script src="../Scripts/angular.js"></script>
<script src="../assets/js/angular-grid.js"></script>
<script src="../assets/controller/gods_controller.js"></script>
<script src="../Scripts/angular-animate.js"></script>
</body>
</html>
似乎没有数据传递到我的第二个控制器,表达式根本不显示任何内容。
EDIT
我也尝试过使用服务,上面的 HTML 保持不变,但现在我添加了一项服务
module.factory('myService', function () {
var total = 0;
var setTotal = function (x) {
total = x;
}
var getTotal = function () {
return total;
};
return {
setTotal: setTotal,
getTotal: getTotal
}
});
我的主控制器和广告功能现在是:
module.controller("mainCtrl", function ($scope, myService) {
var total = 0
$scope.add = function (x) {
myService.setTotal(x)
}
});
我的 popupCtrl 控制器现在是这样的:
module.controller('popUpCtrl', function ($scope, myService) {
$scope.total = myService.getTotal();
})
我的弹出窗口中的 {{total}} 现在表示为“0”,其中 var Total 等于我的服务中的值。因此,现在正在使用服务传输数据,但 setTotal() 方法现在没有按照 add() 函数的指示设置 var。我已将我的服务作为依赖项注入到两个控制器中。