ui-router不呈现视图

时间:2013-10-02 02:29:31

标签: angularjs yeoman angular-ui-router

我最近拆分了一个我拥有的rails应用程序,并将该前端创建为与yeoman分开的应用程序。出于某种原因,我的观点不再呈现,例如我的应用定义:

    'use strict';

    var actionTrackApp = angular.module('actionTrackApp', [ 'ui.router', 'ngGrid']);
    actionTrackApp.config(function($locationProvider) {
      return $locationProvider.html5Mode(true);
    });
    actionTrackApp.config(function($stateProvider){
      $stateProvider
        .state("packageIndex", {
          url: "/packages",
          views: {
            "main": {
              controller: "ApplicationCtrl",
              template: "<h1>Test</h1>"
            },
            "": {
              template: "<h1>Test2</h1>"
            }
          },
          resolve: {
            test: function(){
              console.log("test")
            }
          }
        })  
    });

在我的index.html文件中我有:

bodytag ng-app="actionTrackApp" ng-controller="ApplicationCtrl">
    your site or application content here<a href='/packages'>Package Index</a>

    <div ng-view="main" class="container"></div>
    <div ng-view=""></div>
/bodytag

当我点击链接时,resolve属性确实解析了,我在控制台中看到“test”。我尝试在应用程序控制器上附加$ routeChangeStart / success watch,但这里没有启动/成功。

1 个答案:

答案 0 :(得分:4)

我看了你的代码,发现了几个问题

  1. 要引用ui-router视图,您必须使用指令ui-view,而不是ng-view
  2. “”视图定义错误 - 您必须使用有效的密钥名称,我将其更改为a并更新html中的引用
  3. 完成这些更改后,所有内容都按预期运行:http://plnkr.co/edit/lxAUGMqajwI461VKz8xo

    ps:我继续在你的链接上使用ui-sref而不是对/ package url进行硬编码......