Question

我正在为我的应用程序使用ui-router模块。

我的index.js文件是 -

angular.module("gameApp", ["ui.router"])
    .config(function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/game");

        $stateProvider
       .state("test-your-quickness", {
           url: "/test-your-quickness",
           templateUrl: "../../index.html",
           abstract: true
       })
       .state("test-your-quickness.game", {
           url: "/game",
           template: "<h1>hello</h1>"
        });
    });

index.html文件 -

 <!DOCTYPE html>
 <html>
 <head>
   <title>Test Your Quickness</title>
   <meta charset="utf-8" />
 </head>
 <body ng-app="gameApp">
   alert("hello");
   <div ui-view=""></div>

   <script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
   <script type="text/javascript" src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
   <script type="text/javascript" src="commons/js/index.js"></script>

但是当我去游戏＆＃39; state，模板没有被注入index.html。请纠正我在哪里出错。

Answer 1

你的方法有点偏差。不要将index.html定义为最外层州的模板。

当您打开index.html时，ng-app指令将引导您的应用程序 - index.html会自动呈现给浏览器。现在，当您定义具有模板（Url）的状态时，只有然后才会呈现为相应的ui-view标记。

正确的代码是这样的：

angular.module("gameApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/game");

    $stateProvider
      .state("game", {
          url: "/game",
          template: "<h1>hello</h1>"
       });
});

在ui-view中注入模板不起作用

1 个答案: