ng-view 没有按预期工作

Question

好的，我正在尝试为一个与 SPA 中使用 ng-view 的加载时间相关的问题创建一个简单的 plunkr，但似乎我什至无法设法创建一个有效的场景。

我想要的是一个带有 ng-view 和 2 个模板的 SPA，这样每个模板都会显示一些基本数据，并且可以导航到另一个模板。

这是 plunkr 这是 spa 的代码

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script data-require="angular-route@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

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

</html>

这是 js

angular

.module('app', ['ngRoute'])

.controller('ScreenController', ScreenController)

.config(['$routeProvider', routeProvider])

ScreenController.$inject = [ '$scope' ];

// initial navigation
function routeProvider($routeProvider) {

  $routeProvider.
  when('/screen1.html', {
    templateUrl: './screen1.html',
    controller: ScreenController
  }).
  when('/screen2.html', {
    templateUrl: './screen2.html',
    controller: ScreenController
  }).
  otherwise({
    url: '/screen1.html',
    templateUrl: './screen1.html',
    controller: ScreenController
  });
}

function ScreenController($scope) {

  $scope.data1 = [];
  $scope.data2 = [];

  $scope.ready = false;

  $scope.numElements = function(scr) {
    var length = scr === '1' ? $scope.data1.length : $scope.data2.length;
    return 'Data has ' + length + ' elements';
  }

  function init() {
    console.info('ScreenController.init');

    $scope.data1 = [
    { a:'a1', b: 'b1' },
    { a:'a2', b: 'b2' },
    { a:'a3', b: 'b3' },
    { a:'a4', b: 'b4' },
    { a:'a5', b: 'b5' },
    { a:'a6', b: 'b6' },
    { a:'a7', b: 'b7' },
    { a:'a8', b: 'b8' }
    ];

    $scope.data2 = [
    { a:'a1', b: 'b1', c:'c1', d:'d1' },
    { a:'a2', b: 'b2', c:'c2', d:'d2' },
    { a:'a3', b: 'b3', c:'c3', d:'d3' },
    { a:'a4', b: 'b4', c:'c4', d:'d4' }
    ];

    console.info('data1: ' + JSON.stringify($scope.data1));
    console.info('data2: ' + JSON.stringify($scope.data2));
    $scope.ready = true;
  }

  init();
}

这没有像我预期的那样工作。

第一次加载时，页面似乎运行良好，因为它显示了模板 screen1.html 和数据。但是，一旦我开始单击链接，它就不再起作用了，无法访问控制器，也不会显示数据。有什么想法吗？

非常感谢！

Answer 1

这行代码应该是<tr ng-repeat="elem in data1">而不是<tr ng-repeat="elem in data">

Answer 2

你的screen1.html

<div>
  <div>SCREEN1</div>
  <a href="screen2.html" class="button">To Screen 2</a>
  <table>
    <tbody>
      <tr ng-repeat="elem in data1">
        <td ng-bind="elem.a"></td>
        <td ng-bind="elem.b"></td>
        <td ng-bind="elem.c"></td>
        <td ng-bind="elem.d"></td>
      </tr>
    </tbody>
  </table>
  {{data}} elements
</div>

它的数据 1 而不是数据

Answer 3

您需要 <a href="#/screen1.html" class="button">To Screen 1</a> 注意 #/。这不包括您在代码中的其他错误，就像其他人提到的那样。

Answer 4

首先你需要改变一些东西。以这种方式设置您的 ng-view。此外，对于 Angularjs，最好的做法是与 angularjs 保持一致，并尽量不要混入太多 jquery。将您的 onload 更改为 ng-init，或者更好的是在页面加载后将函数加载到 js 控制器文件中（构造函数）

SpaCtrl 是你的通用控制器，所以你想给我们一个 as 语句，这样它就不会变成 $scope soup

<body ng-app="app" ng-controller="SpaCtrl as spa">
  <ng-view ></ng-view>
</body>

现在，关于您的其余代码，我已经拆分了另一个 plunker 以供您查看它是否正常工作。您会注意到我将您的 js 函数更改为 angular 函数，它稍微整理了您的 html。如果您有任何问题，请告诉我！

plunker

ng-view 没有按预期工作

ng-view not working as expected

angularjs

ng-view