的代码：

Question

的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Ui State Demo</title>
    <meta charset="utf-8">

    <!--AngularJS v1.5.9-->
    <script type="text/javascript" src="angular.min.js"></script>

    <!--angular-ui-router v0.2.15-->
    <script type="text/javascript" src="angular-ui-router.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('uiDemo', ['ui.router']);
        app.config(function($stateProvider) {
            $stateProvider.state('parent', {
                url: '/parent',
                controller: 'ParentController'
            }).state('childOne', {
                controller: 'ChildOneController',
                template: '<h1>Child One</h2>'
            }).state('childTwo', {
                controller: 'ChildTwoController',
                template: '<h1>Child Two</h2>'
            });
        });
        app.controller('ParentController', ['$state', function($state) {
            console.log('Parent Controller Start');
            if (Math.round(Math.random()) == 0) {
                $state.go('childOne');
            } else {
                $state.go('childTwo');
            }
        }]);
        app.controller('ChildOneController', function() {
            console.log('Child One');
        });
        app.controller('ChildTwoController', function() {
            console.log('Child Two');
        });
    </script>
</head>

<body ng-app="uiDemo">
    <nav>
        <a ui-sref="parent">Parent</a>
    </nav>

    <ui-view></ui-view>
</body>
</html>

状态parent有一个网址，而childOne和childTwo没有。他们与parent共享相同的网址。

当我点击Parent时，它会随机重定向到ChildOneController或ChildTwoController，但也会加载ParentController两次。

如果我在两个ChildControllers上放两个不同的URL，它可以正常工作。但是我希望在重定向到ChildControllers之后将URL保持为与父级相同。

有人可以帮忙吗？如何避免这种两次加载问题？

Answer 1

但是我希望在重定向到之后保持url与父级相同 ChildControllers。来自评论：所以我想知道有没有办法避免重复的控制器加载并保持父母的＃39;国家和控制器？

选项1

您可以为parent州abstract:true撰写文章，以便只有当状态从parent.childOne更改为parent.childTwo时才会加载此控制器

例如：

state('parent', 
 {
   url: '/parent',
   abstract:true,
   templateUrl: 'parent.html',
   controller: 'ParentController'                            
 })
 .state('parent.childOne',{ url: '/childOne',   templateUrl: 'childOne.html'})
 .state('parent.childTwo',{ url: '/childTwo',  templateUrl: 'childTwo.html'})

选项2

你可以做一些技巧，以避免第二次呼叫控制器：

控制器呼叫开始时：

 if ($state.transition) return;   //hack   https://github.com/angular-ui/ui-router/issues/64

Answer 2

那么你可以让父母不是一个“状态”。并将其作为与导航器绑定的页面控制器。

<nav ng-controller="ParentController">
  <a ng-click="vm.loadChildState()">Parent</a>
</nav>

在父母＆＃39;中创建一个名为loadChildState（）的方法。控制器，然后使用$ state.go执行现在的操作。

它应该仍然具有相同的功能，点击该链接将加载当前拥有的各个子状态，而无需重新加载父控制器。

ui-router - 控制器在调用$ state.go时会加载两次

的代码：

2 个答案:

选项1

选项2