Ui 路由器 - 嵌套视图未显示（$viewContentLoaded 未触发）答案

【问题标题】：Ui Router - nested view not showing up ($viewContentLoaded not fired)Ui 路由器 - 嵌套视图未显示（$viewContentLoaded 未触发）
【发布时间】：2014-12-13 02:59:43
【问题描述】：

views/index.jade：

extends layout

block content
  div(ui-view)

views/partials/user.jade

h1 Route 1
hr
a(ui-sref=".profile") Show Content
div(ui-view)

js/appStates.js

'use strict';

var app = angular.module('myApp');

app.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/user");

    $stateProvider
      .state('user', {
        url: '/user',
        templateUrl: 'partials/user'
      })
      .state('user.profile', {
        url: '/profile',
        template: '<h1>My Contacts</h1>'
      })
    ;
  }
]);

“我的联系人”永远不会出现。请注意，该链接似乎是正确的。不知道发生了什么。

我尝试了以下方法：

http://tech.endeepak.com/blog/2014/05/03/debugging-angular-ui-router/

我注意到嵌套视图上从未调用过“$viewContentLoaded”，不知道为什么。有什么不应该调用的情况？

【问题讨论】：

标签： javascript node.js angularjs angular-ui-router nested-views

【解决方案1】：

通过 IRC 频道的快速帮助，我设法解决了。

问题出在jade文件的第4行：

div(ng-view)

出于某种原因，默认情况下，jade 将呈现值等于名称的空属性。所以结果html是：

<div ng-view="ng-view"></view>

一个简单的解决方法是在jade中将其设置为空值

div(ng-view="")

现在它可以工作了。

再次感谢 IRC 的人们。

【讨论】：

【解决方案2】：

如果您使用 gulp 将文档类型指定为 html5，以便玉知道无名标签是有效的

咖啡脚本示例

# Compile jade to html
gulp.task 'jade', ->
  gulp.src paths.jade
  .pipe jade({pretty: true, doctype: 'html')

【讨论】：