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

我有有一个介绍页面和“工作”页面的角度JS应用.. 我的HTML的一个简化版本是这样的：如何获取多个Angular JS路由以共享单个控制器实例？

(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请求现在被丢弃。如何在两个节点之间共享同一个控制器实例路线？

来源

2015-09-03 Dan O' Connor

在定义你的路由

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

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

来源

2015-09-03 17:43:13 maddygoround

创建它是控制器的自己的实例绑定到一个控制器，每个视图您可以随时通过您的控制器。控制器只能被视图继承共享，也就是说，子视图将有权访问父控制器的同一个实例。

但是，这似乎并不是你想要做的。这听起来像你想要做的是坚持控制器实例之间的一些数据（通过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; 
     }; 
    }; 

});

来源

2015-09-03 17:46:28 GPicazo

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

回答

相关问题