Question

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

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

这是plunkr，这是水疗中心的代码

<!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和数据。但是一旦我开始点击链接它就不再起作用了，不会访问Controller并且不显示数据。有什么想法吗？

非常感谢！

Answer 1

您的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 2

这行代码应为WindowsAzure\Common\Internal\Resources.php

<tr ng-repeat="elem in data1">

Answer 3

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

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

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

现在至于你的其余代码我已经拆分了另一个plunker让你看到它正常工作。您会注意到我将您的js函数更改为角度函数，并稍微整理了您的html。如果您有任何问题，请告诉我们！

plunker

Answer 4

您需要#/注意container。这不包括您的代码中的其他错误，如其他人提到的那样。

ng-view无法按预期工作

4 个答案: