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': {},
    }
  })