Question

当我访问'/ todo-list'状态URL时，我不知道为什么我的模板没有加载。

// 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>

'否则'工作正常，但当我导航到'/ todo-list'时，它给我一个空白页面。路线正在运行......但不是模板。它与ui-view元素有关吗？

Answer 1

我只是将view更改为views，并且按预期工作。

＆＃13;

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");
  };
});

＆＃13;

<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>

＆＃13;

AngularJS UI Route：模板未加载。空白页

1 个答案: