AngularJS 使用 $broadcast 帮助在控制器之间共享数据

2024-01-10

我一直在尝试使用 $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。我已将我的服务作为依赖项注入到两个控制器中。


添加监视或广播以在控制器之间共享数据是一种非常糟糕的做法,这样做是为了在两个控制器中注入通用服务。

服务为我们提供了一种共享数据和功能的简单方法 贯穿我们的应用程序。我们创建的服务是单例的,可以 注入控制器和其他服务,使它们成为理想的 编写可重用代码的地方。

点击它的链接https://thinkster.io/a-better-way-to-learn-angularjs/services https://thinkster.io/a-better-way-to-learn-angularjs/services

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 使用 $broadcast 帮助在控制器之间共享数据 的相关文章

随机推荐