Question

我似乎面临在angularjs中控制器之间共享数据的问题我有两个HTML文件，每个文件一个控制器，一个共享信息的服务和一个用于路由的常规应用程序文件。

这是第一个文件

std::string

这是相应的Controller：

<div class="container">
<button ng-click="broadcastData()"> Send  </button> </div>

这是第二个HTML文件：（infoView.html）

angular.module('myApp').controller('sendInfoController',
 ['$scope','$rootScope','$location'
  function ($scope,$rootScope, $location) 
{
    $scope.broadcastData=function()
    {
        shareInfoService.sendData({info: "Okay"});
        $location.path('/infoView');
    }
}]);

这是相应的控制器：

<div>
 {{data}}
</div>

以下是分享信息的服务：

angular.module('myApp').controller('infoController',
 ['$scope','$rootScope',
function ($scope,$rootScope) 
 {
    $scope.data="hello";
    $rootScope.$on('sendTheData', function(event,args)
    {
            console.log(args);
            $scope.data=args.info;
    });
    console.log($scope.data);
}]);

当我单击第一个HTML文件中的按钮时，该位置将更改为infoView并调用shareInfoService.broadcastData函数。

重定向到第二个HTML文件。但是，此页面上显示的信息是“hello”而不是“Okay”。

Web控制台日志显示 {info：“好的”} 首先，在此之后立即“问好”。

如何纠正以显示前一个控制器发送的数据？

Answer 1

您在更改位置之前发送广播，以便在广播事件时不会加载infoController中的听众。您可以将值存储在服务中，然后在加载时infoController检索它，而不是广播。

服务

angular.module('prkApp').factory('shareInfoService', ['$rootScope', function($rootScope) {
    var data;

    //Return the particular function
    return ({
      sendData: sendData,
      getData: getData
    });

    function sendData(new_data) {
      data = new_data;
    };

    function getData() {
      return data;
    }
  }
]);

控制器

angular.module('myApp').controller('infoController', ['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.data = "hello";
    console.log($scope.data);
    $scope.data = shareInfoService.getData();
    console.log($scope.data);
  }
]);

在两个控制器之间共享数据

1 个答案: