在angular-ui-router中没有到达子状态控制器

Question

我的代码中有以下设置

.config(function config($stateProvider)
    $stateProvider
      .state('home', {
        url : '/home',
          views : {
            'main' : {
              controller : 'HomeCtrl',
              templateUrl : 'home/home.tpl.html'
            }
          }
        })
      .state('home.details', {
        url : '/details',
        views : {
          " " : {
            template : "<h1>hello</h1>",
            controller : function ($scope, $http, $state) {
              //do some stuff here
              //does not seem to reach code in here
            }
         }
        }
  });
})
.controller('HomeCtrl', function ($scope, $http, $state) {
    //on a button click do $state.go('.details');
});

当我这样做时，单击我的HomeCtrl上的按钮似乎将我带到/ home / details，但此时似乎没有进入该特定路线的控制器内部。 （我通过在控制器内部设置断点来查看详细信息。）我的设置有问题吗？我正在尝试执行与ui-router网页中显示的此sample app类似的内容。

Answer 1

这里的解决方案是named-view （非）匹配。这是工作plunker。

我们必须将命名 ui-view置于父视图中（或使用更精确的命名，例如参见here） < / p>

因此，父级主页模板应包含名为ui-view的内容，例如的 nameOtherThanSpace

<div ui-view="nameOtherThanSpace" ></div>

儿童定义必须以该视图为目标，完整的片段是：

  $stateProvider
    .state('home', {
      url: '/home',
      views: {
        'main': {
          controller: 'HomeCtrl',
          template: '<div>' +
            '<h1>hello from parent</h1>' +
            '<hr />' +
            '<div ui-view="nameOtherThanSpace" ></div>' +
            '<div>',
        }
      }
    })
    .state('home.details', {
      url: '/details',
      views: {
        "nameOtherThanSpace": {
          template: "<h2>hello from a child</h3>",
          controller: function($scope, $http, $state) {},
        }
      }
    });

如何使用更具体的视图名称：

• View Names - Relative vs. Absolute Names
• UI-Router isnt rendering childs correctly with templateurl in Asp.net Mvc

使用名称 nameOtherThanSpace 的工作plunker，而不是＆＃34; ＆＃34; （空间）

Answer 2

尝试在应用上注册您的控制器，而不是在$ stateProvider上注册。 e.g。

var app = angular.module('myApp', []);
app.controller('HomeCtrl', function ($scope, $http, $state) {
    //on a button click do $state.go('.details');
});

更新1：

如果您有多个视图，则只需要指定视图，在这种情况下视图可能需要具有名称。但是你只有一个该状态的视图所以我会这样做。

.state('home.details', {
    url : '/details'
    template : "<h1>hello</h1>",
    controller : function ($scope, $http, $state) {
      //do some stuff here
      //does not seem to reach code in here
    }
}