Angular UI-Router 不显示 html 内容，但指向正确的路径。没有错误，但 ui-view 不起作用

Question

我正在为 Angular 应用程序使用 UI-Router。我似乎找不到我做错了什么。我也没有收到任何错误，这让我很难调试。也遵循了文档，我正在遵循他们的步骤。当我不将它嵌套在子视图中时，我的控制器功能正在工作。有人可以指导我做错什么吗？提前致谢！

APP.JS

'use strict';

var app = angular.module('americasTopStatesApp', ['ui.router', 'ngAutocomplete']);

app.run(function($state, $rootScope) {
    $rootScope.$state = $state;
});

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider
    .otherwise('/home');

    $stateProvider
    //HOME
    .state('home', {
        url: '/home',
        templateUrl: './app/views/homeTmpl.html',
        controller: 'homeCtrl'
    })
    //RANKINGS
    .state("rankings", {
        url: "/rankings",
        templateUrl: './app/views/rankingsTmpl.html',
        controller: 'rankingsCtrl'
    })  
        // RANKINGS CHILDREN
        .state('rankings.data', {
            url: '/data',
            templateUrl: './app/views/rankingsDataTmpl.html',
            controller: 'rankingsCtrl',
            parent: 'rankings'
        })
});

CONTROLLER排名Ctrl

'use strict';

app.controller('rankingsCtrl', function($scope, rankingsService) { //Start Controller

    // ***********************************************
    // *************** GET LATEST DATA ***************
    // ***********************************************  
    $scope.getAllStateRankings = function() {
        rankingsService.getStateRankingsData().then(function(data) {
            $scope.showRankings = true;

            // console.log("Contoller Data", data);
            $scope.states = data;
        });
    };
    $scope.showRankings = false;
    $scope.getAllStateRankings();

}); //End Controller

父视图排名Tmpl.html

<div class="rankings-heading">
    <h1>America's Top States</h1>
    <button ng-click="getAllStateRankings()">
        <a ui-sref="rankings.data" id="data" class="btn">Data</a>
    </button>
</div>

</div ui-view></div>

子视图（嵌套 ui-view）rankingsDataTmpl.html

<div class="rankings-container" ng-show="showRankings">

    <div class="panel panel-primary" ng-repeat='state in states'>
        <div class="panel-heading">
            <h3 class="panel-title">{{state.state}}</h3>
        </div>
        <div class="panel-body">
            Economy: {{state.economy}}<br>
            Capital Access: {{state.accessToCapital}}<br>
            Business: {{state.business}}<br>
            Cost of living: {{state.costOfLiving}}<br>
        </div>
    </div>
</div>

屏幕截图

Answer 1

有a working plunker

在这种情况下，当我们有父子和angular的UI-Router时，我们不应该使用基于的解决方案

父母和孩子有相同的控制器。 // WRONG approach

因为他们实际上确实有相同的 type。那种'rankingsCtrl'在运行时的instance是不同的。

我们需要的是：

How do I share $scope data between states in angularjs ui-router?

scope inheritance，由引用对象驱动，例如$scope.Model = {}

有调节控制器：

.controller('rankingsCtrl', ['$scope', function($scope) {

    $scope.Model = {};
    $scope.getAllStateRankings = function() {
      //rankingsService.getStateRankingsData().then(function(data) {
        $scope.Model.showRankings = true;

        // console.log("Contoller Data", data);
        $scope.Model.states = data;
      //});
    };
    $scope.Model.showRankings = false;
    $scope.getAllStateRankings();

}])

最后，子视图可以有不同的控制器，并有自己的逻辑：

.state("rankings", {
  url: "/rankings",
  templateUrl: 'app/views/rankingsTmpl.html',
  controller: 'rankingsCtrl'
})
// RANKINGS CHILDREN
.state('rankings.data', {
  url: '/data',
  templateUrl: 'app/views/rankingsDataTmpl.html',
  controller: 'rankingsChildCtrl',
  parent: 'rankings'
})

另外，父视图应该有固定的div：

// wrong
</div ui-view></div>
// starting tag
<div ui-view></div>

查看it here in action