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按預期工作

回答

相關問題