Question

我有两个部分页面。在第一页中，在ManageUsersTreeViewController中进行休息调用。我希望这些数据到达第二个控制器ManageUsersTableController。 $ scope.userData = data;在getUserData（）函数中我需要到达第二个控制器。

第一个控制器

app.controller('ManageUsersTreeViewController',['$rootScope', '$scope', '$http', function($rootScope, $scope, $http) {


$scope.getAllUsers = function() {
    $http.get('rest/useraccess/users/').
    success(function (data) {
        $scope.users = data;
    }).
    error(function (error) {
        console.log(error);
    });
};


$scope.getUserData = function(user){
    $http.get('rest/useraccess/' + user ).
    success(function (data) {
        $scope.userData = data;
        console.log("user data returned:" + $scope.userData);

    }).
    error(function (error) {
        console.log(error);

    });
};
}]);

第二个控制器

app.controller('ManageUsersTableController',[ '$scope', '$http', '$rootScope', function($rootScope, $scope, $http) {

$scope.maxSize = 3;
$scope.pageNumber = 1;
$scope.pageSize = 20;

$scope.pageSizesForSelect =[5,10,20,50];

}]);

如何将ManageUsersTreeViewController中的$ scope.userData共享给ManageUsersTableController？非常感谢任何帮助。

Answer 1

你可以使用$ emit函数。这个stackoverflow answer解释了$ emit，$ broadcast，$ on。

app.controller('ManageUsersTreeViewController',['$rootScope', '$scope', '$http', function($rootScope, $scope, $http) {
  $rootScope.$emit('ManageUserData.Event_or_name_it_yourself', { data: $scope.userData });
}

然后，在您的其他控制器中，您可以收听此事件。 *确保您的视图加载了两个控制器。

app.controller('ManageUsersTableController',[ '$scope', '$http', '$rootScope', function($rootScope, $scope, $http) {
  // destory the rootscope watcher on scope destory event, as garbage collection. otherwise your rootscope will keep listen on the event
  $scope.$on('$destory', $rootScope.$on('ManageUserData.Event_or_name_it_yourself', function (event, params) {
    $scope.userData = params.data;
    // do what you need to do.
  });
}

Answer 2

您可能希望构建angular service以跨控制器共享该数据。另一个＆＃34; down n dirty＆＃34;选项是将您的userData附加到$rootScope（如下所示）。我想你会发现你的应用程序会快速超过这个解决方案。

$rootScope.getUserData = function(user){
    $http.get('rest/useraccess/' + user ).
    success(function (data) {
        $rootScope.userData = data;
        console.log("user data returned:" + $rootScope.userData);
        // ...  now just access $rootScope.userData in other controllers
    }).
    error(function (error) {
        console.log(error);
    });

Answer 3

您不能使用$ emit，$ broadcast，$ on来控制控制器之间的数据。这个approch的问题是接收控制器可能还没有被加载，并且没有在函数上注册它的$。

例如，如果你有2页应用程序与单独的控制器，当第一个加载它的控制器也加载，但seconde页面控制器不存在，因为没有控制器来捕获第一个控制器$ emit或$ broadcast

只有当所有涉及的控制器都已加载时，上述操作才会起作用。

在您使用服务为您完成工作并将接收数据存储在$ rootScope之前。使用这种方法的问题是，当您的应用程序变得越来越大并且将要有越来越多的控制器，您将希望彼此之间进行通信时，将所有这些数据存储在rootScope中是不好的方法。

如果您想使用某项服务，我建议您设计一个如下的通讯系统。

按照服务中控件号码的大小创建一个数组。
上面数组中的每个单元格也都是一个数组，从零开始。
在此服务中创建一个包含所有控制器名称的const数组。
将服务注入每个控制器。
每次控制器想要将数据发送到另一个控制器时，它需要迭代服务的名称数组，直到找到它想要传递数据的控制器名称。一个接收控制器名称被发现，发送控制器知道它的索引并且可以将新消息推送到1 + 2中描述的阵列中的接收控制器单元。 “消息”可以是一个对象，例如：{from：'controller-name'，data：{}}。
当控制器开始运行时，检查它的“邮箱”是否会检索数据并删除不再需要的单元格。

您可以尝试的另一种方法是创建一个Root控制器并将其放在索引中的body元素上，例如：... 此控制器将在您的应用程序启动时运行，并可用于存储数据，如上所述

Angular 1 - 从休息呼叫到另一个控制器共享数据

3 个答案: