如何獲取多個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