ng-view按预期工作

好吧，我正在尝试创建一个简单的plunkr，用于与使用ng-view的SPA加载时间相关的问题，似乎我无法设法创建有效的场景。ng-view按预期工作

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

这里是plunkr，这是温泉

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> 
    <script data-require="[email protected]" 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和数据。但是一旦我开始点击链接，它就不再起作用了，控制器不会被访问，数据也不会显示。任何想法为什么？

非常感谢！

来源

2016-02-18 David

这个例子有很多问题。请更具体一些，特别是您期望发生的事情，因为这不是代码评论网站。例子可能是，为什么列表不在第1页上显示，或者当您从第2页返回时，为什么不是页面1工作？ –

你是对的@AndréLaszlo，对不起;我编辑了这篇文章，因为我的问题与链接没有像预期一样工作。 – David

numElements（）函数需要一些参数scr – shreyansh

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

来源

2016-02-18 15:47:00 dendimiiii

正确，谢谢！但任何想法为什么它加载之前的模板？难道那不是根本不工作？ – David

@david请看下面的答案。 Dendimiiii是正确的，但我也解决了代码中的其他一些问题。你是新来的Angularjs？ – Ohjay44

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

来源

2016-02-18 15:29:51

你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，而不是数据

来源

2016-02-18 15:44:32

您的代码不能反映问题的正确解决方案。虽然它确实解决了许多问题之一，但它并不是主要问题。 – Ohjay44

首先你需要改变一些东西。以这种方式设置你的ng-view。另外对于Angularjs来说，最好的做法是继续使用angularjs，并尽量不要混入jQuery中。改变你的onload为一个ng-init，或者更好的做法是在页面加载完成后在js控制器文件中加载函数（构造函数）

SpaCtrl是你的通用控制器，所以你想要我们一个as语句，到$范围内的汤

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

现在至于其余的代码我已拆分另一个plunker让你看到它的工作。你会注意到我把你的js函数改成了角函数，并且整理了一下你的html。如果您有任何问题，请告诉我！

plunker

来源

2016-02-18 15:52:18 Ohjay44

Thanks @ Ohjay44，实际上代码有点乱，但这是因为我只是试图将其降低到基本的水平。原始代码更加有组织。谢谢你的帮助！ – David

随时。有一件事要记住，如果你有一个像你的SpaCtrl一样的过度控制器，你想使用AS语句，所以你可以在任何地方访问它。我有很多使用通用控制器的SPA。同样重要的是，一旦开始就始终坚持使用angularjs！ – Ohjay44

ng-view按预期工作

回答

相关问题