在使用routeprovider时，在两个控制器之间调用函数。

13 浏览
0 Comments

在使用routeprovider时，在两个控制器之间调用函数。

我使用路由提供程序如下所示，

var appModule = angular.module('ngLogin', ['ngRoute','restangular','btford.socket-io','ngSanitize','xeditable']);
appModule.config(['$routeProvider',
              function($routeProvider) {
                $routeProvider.
                when('/home', {
                  templateUrl: 'sample/homepage.html',
                    controller: 'ngHomeControl'
                    }).
                when('/contacts', {
                  templateUrl: 'sample/homepage.html',
                    controller: 'ngContactControl'
                  });
            }]);

在这里，我需要从ngHomeControl调用函数到ngContactControl。

我尝试了以下方法，但函数没有被调用。

appModule.controller('ngHomeControl', function($scope,$routeParams,socket,Restangular,$http) {
$rootScope.$broadcast('getFriendList',{"userName":userName});
});
appModule.controller('ngContactControl', function($scope,$routeParams,$rootScope,socket,sharedProperties,Restangular,$http,$timeout) {
$scope.$on("getFriendList",function(event,data)
        {
          console.log('getFriendList');
        });
});

有人能帮我解决吗？

0

2 答案

0 Comments

在使用routeprovider时，如果在/home页面上没有一个ngContactControl实例存在，那么你的事件侦听器将不会被触发。你可以创建一个父控制器来处理作用域事件，但更好的方法是使用一个在需要这个功能的控制器之间共享的服务。可以参考这个示例来了解如何通过服务来共享数据和/或函数。

0
0 Comments

问题的出现原因是在使用$routeProvider时，只有一个controller会被实例化，因此无法在两个controller之间调用函数。解决方法是使用一个service来实现两个controller之间的通信。下面是一个示例代码：

var appModule = angular.module('appModule', ['ngRoute']);
appModule.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/home', {
        templateUrl: 'home.html',
        controller: 'ngHomeControl'
      }).
      when('/contacts', {
        templateUrl: 'contacts.html',
        controller: 'ngContactControl'
      });
  }]);
appModule.service('friendsService', function(){
  this.getFriendList = function () {
    return ['John', 'James', 'Jake'];
  }
});
appModule.controller('ngHomeControl', function($scope, friendsService) {
  $scope.homeFriends = friendsService.getFriendList();
});
appModule.controller('ngContactControl', function($scope, friendsService) {
  $scope.contactFriends = friendsService.getFriendList();
});

通过这种方式，我们可以在ngHomeControl和ngContactControl两个controller中使用同一个service来获取朋友列表。

为了测试这个解决方案，你可以访问这个JSFiddle链接。

在控制台输出中，你会看到每当路由更改时，控制器都会被实例化，而服务只会在第一次被需要或注入时实例化一次。

另外，如果你想在service中使用$scope，这是不可能的。另外，如果你在service中使用了restangular，并且返回了restangular的response值，它不会反映在$scope.homeFriends上。解决这个问题的方法是使用promises，将response值传递给controller，并在controller中使用$scope进行赋值操作。

0