AngularJS UI路由：模板未加載。空白頁

我不知道爲什麼當我訪問'/ todo-list'狀態URL時我的模板沒有加載。AngularJS UI路由：模板未加載。空白頁

// main.js - routes 

angular.module('myapp', ['ui.router']) 
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('todolist', { 
      url: '/todo-list', 
      view: { 
       '@': { 
        template: 'test!', 
       } 
      } 
     }) 
     .state('otherwise', { 
      url: '*path', 
      template: 'Oops! Blank page!' // <- the otherwise is working 
     }); 
}]);

。

// index.html 

<html ng-app="app"> 
<head> 
    <title>Project</title> 

    <script src="./js/lib/angular.min.js"></script> 
    <script src="./js/lib/angular-ui-router.js"></script> 
    <script src="./js/main.js"></script> 
</head> 

<body> 
    <div class="container"> 
    <ui-view></ui-view> 
    </div> 
</body> 

</html>

的「否則」工作正常，但是當我瀏覽到「/待辦事項清單」它給了我一個空白頁。該路線正在工作..但不是模板。它與ui-view元素有關嗎？

來源

2017-05-04 Victor

你能告訴我們todolist的看法好嗎？ –

@ A.Hussien，文本應該正確加載正確嗎？沒有.html視圖。 '否則'模板文本正在工作，但我不知道爲什麼'/ todo-list'不起作用 – Victor

我只是將view更改爲views，它按預期工作。

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

 
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
 
    $stateProvider 
 
    .state('todolist', { 
 
     views: { 
 
     '@': { 
 
      template: 'test!<button ng-click="clickEvt()">Click me!</button>', 
 
      controller: function($scope) { 
 
      $scope.clickEvt = function() { 
 
       alert('Thanks!'); 
 
      }; 
 
      } 
 
     } 
 
     } 
 
    }) 
 
    .state('otherwise', { 
 
     url: '*path', 
 
     template: 'Oops! Blank page!<button ng-click="go()">todolist</button>', // <- the otherwise is working 
 
     controller: 'defaultCtrl' 
 
    }); 
 
}]); 
 
app.controller("defaultCtrl", function($scope, $state) { 
 
    $scope.go = function() { 
 
    $state.go("todolist"); 
 
    }; 
 
});

<html ng-app="myapp"> 
 

 
<head> 
 
    <title>Project</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0/angular-ui-router.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <ui-view></ui-view> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-05-04 02:56:11 Pengyy

哇！我花了很多時間試圖弄清楚爲什麼！謝謝！我完全是盲目的！ – Victor

AngularJS UI路由：模板未加載。空白頁

回答

相關問題