如何获取多个Angular JS路由来共享一个控制器实例？

Question

我有一个有角度的JS应用程序，它具有一个简介页面和一个“工作”页面。.我的html的简化版本如下：

 (function () { 'use strict'; var MyController = function (_, $rootScope, $scope, $location, $anchorScroll, $timeout, gettextCatalog, service) { var self = this; console.log("test"); //More code which invokes http requests }; angular.module('my.controller', [ 'gettext', 'lodash', 'ngRoute', 'ngSanitize', 'ngAnimate', 'my.service' ]).config( function ($routeProvider) { $routeProvider.when('/', { 'templateUrl': 'modules/home.html', 'reloadOnSearch': false }).when('/chatting', { 'templateUrl': 'modules/working.html', 'reloadOnSearch': false }); }).controller('MyController', MyController); }());

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <html id="ng-app" ng-app="app" ng-controller="MyController as myCtrl"> <head> <link rel="stylesheet" href="styles/main.css"> <title>What's in Theaters</title> </head> <body id="app-body" class="dialog-body"> <div style="height: 100%; width: 100%" ng-view></div> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-gettext/dist/angular-gettext.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="app.js"></script> <script src="modules/my-controller.js"></script> </body> </html>

我遇到的问题是，当我从一条路径移动到另一条路径时，即从“ /”移动到“ /＃working”时，MyController重新初始化，并且已经完成的http请求现在被丢弃。两条路线上的控制器实例？

Answer 1

绑定到控制器的每个视图都将创建其自己的控制器实例。 只能通过视图继承共享控制器的视图，也就是说，子视图将有权访问父控制器的相同实例。

但是，这似乎并不是您要尝试执行的操作。 听起来您想要做的是在控制器实例之间保留某些数据状态（通过http请求获取）。 在这种情况下，您可能要做的就是将请求逻辑移至服务（或工厂）中，然后将该服务注入控制器中。 由于服务是成角度的单身人士，因此您的请求现在仅应执行一次。

例：

var MyController = function (_, $rootScope, $scope, $location, $anchorScroll, $timeout, gettextCatalog, service, yourHttpService) {
        var self = this;
        console.log("test");

// get data from your http service here... perhaps $scope.data = yourHttpService.getData(...).then(...);
    };


.factory('yourHttpService', function($http, $q) {

    var dataCache = ...; // create a local memory db to store the data

    return {
       getData: function(...) {
          var deferred = $q.defer();

          // check to see if the data is already cached, if so resolve the promise with the cached data

          // if data is not cached, perform the $http request to fetch the data, then cache it and resolve your promise

          return deferred.promise;
       };
    };

});

Answer 2

您始终可以在定义路线时通过控制器

$routeProvider.when('/', {
                    'templateUrl': 'modules/home.html',
                    'controller' : MyController,
                    'reloadOnSearch': false

                }).when('/chatting', {
                    'templateUrl': 'modules/working.html',
                    'controller' : MyController,
                    'reloadOnSearch': false
                });

如何获取多个Angular JS路由来共享一个控制器实例？

问题描述

2 个解决方案

解决方案1
2 2015-09-03 17:46:28

解决方案2
0 2015-09-03 17:43:13

如何获取多个Angular JS路由来共享一个控制器实例？

问题描述

2 个解决方案

解决方案1 2 2015-09-03 17:46:28

解决方案2 0 2015-09-03 17:43:13

解决方案1
2 2015-09-03 17:46:28

解决方案2
0 2015-09-03 17:43:13