AngularJS：控制器使用UI路由器更改狀態時多次注冊

Question

我將帶有ui視圖的HTML注入DOM，然后使用ui.router更改狀態。 每次狀態更改時，該控制器似乎都會被注冊一次，因此控制器中的代碼將多次執行。 您可以在下面的plnkr中看到此演示。 （只需彈出打開控制台，然后在左右按鈕之間來回單擊，請注意，控制器每次單擊都會花費額外的時間。）

如果ui視圖作為靜態內容存在於index.html上，則說明生活良好，並且不會發生此問題。 僅當將它們注入DOM時。

var app = angular.module('app', ["ui.router", "appHome", "appOther"]).config([
             "$urlRouterProvider", "$stateProvider", "$locationProvider", 
    function ($urlRouterProvider,   $stateProvider,   $locationProvider) {

        $stateProvider.state('appHome', {
            url: '/home/index',
            views: {
                "Alerts": {
                    template: 'THINGS',
                    controller: "AlertsController as Alerts",
                }
            }
        }).state('appOther', {
            url: '/other/index',
            views: {
                "Other": {
                    template: 'THINGS',
                    controller: "OtherController as Other",
                }
            }
        });

    }
]);

在Plunker上的測試用例： http ://plnkr.co/edit/M2wzVLSSgZ7naOi58qgL

Answer 1

你在那兒。 我並沒有挑戰或判斷這種方法，只是提供了答案。 有一個可行的例子。

您已經正確創建了新范圍。 很好。 但這只是一個A。 基本的和重要的B丟失了。 B-與A相反= ===銷毀新范圍（一旦舊） 。

這將為我們完成工作：

 app.controller('MenuController', ["$scope","$compile", "$state","$http",
    function MenuController($scope,$compile, $state, $http) {
        $scope.goToUrl = function (view) {

                // was scope previously created
                var hasPreviousChildScope = this.childScope !== void 0
                                         && this.childScope !== null;

                if(hasPreviousChildScope)
                {
                  // we must clear after ourselves
                  this.childScope.$destroy();
                  this.childScope = null;
                }

                // create new scope
                this.childScope = $scope.$new();

                var html;
                var state;
                if(view == 'Alerts'){
                  view = '<div ui-view="Alerts"></div>';
                  state  = 'appHome'
                }
                else{
                  view = '<div ui-view="Other"></div>';
                  state  = 'appOther'
                }
                $('#test').html($compile(view)(this.childScope));
                $state.go(state);

        };
    }
]);

在這里檢查所有動作

Answer 2

你為什么要這么復雜？ 是否有特殊原因使您使用

if(view == 'Alerts'){
   view = '<div ui-view="Alerts"></div>';
   state  = 'appHome'
}
else{
   view = '<div ui-view="Other"></div>';
   state  = 'appOther'
   }

$('#test').html($compile(view)(scope));
$state.go(state);

不可能使用類似的東西

<div ng-controller="MenuController">
   <button ui-sref="appHome" value="CLick Me">GoTo Alerts</button>
   <button ui-sref="appOther" value="CLick Me">GoTo Other</button>
</div>
<section ui-view></section>

我使用ui-sref輕松在狀態之間導航。 我准備了一個小演示來說明這一點。 在這里看看。 有幫助嗎？ 可以使用嗎？ 這樣，您甚至不需要menuController。

如果您需要命名視圖（多個嵌套視圖），請查看文檔。 是很好解釋的。 您最終將得到以下結果：

<!-- index.html -->
<body>
  <div ui-view="alerts"></div>
  <div ui-view="other"></div>
</body>

$stateProvider
  .state('report', {
    views: {
      'alerts': { ... templates and/or controllers ... },
      'other': {},
    }
  })

AngularJS：控制器使用UI路由器更改狀態時多次注冊

問題描述

2 個解決方案

解決方案1
1 已采納 2015-02-20 06:03:46

解決方案2
0 2015-02-19 19:32:54

AngularJS：控制器使用UI路由器更改狀態時多次注冊

問題描述

2 個解決方案

解決方案1 1 已采納 2015-02-20 06:03:46

解決方案2 0 2015-02-19 19:32:54

解決方案1
1 已采納 2015-02-20 06:03:46

解決方案2
0 2015-02-19 19:32:54