爲什麼我的angularJS應用程序中的作用域爲空？

我是新來的角，我試圖向我的應用程序tweek教程。我試圖添加路由到我的應用程序，它似乎沒有閱讀我的模板或正確讀取控制器。我安裝了用於Chrome的angularJS擴展（順便說一下，非常棒），它顯示我的作用域爲空，沒有模型。這裏是我的html：爲什麼我的angularJS應用程序中的作用域爲空？

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp"> 
<head> 
    <title>Map Test</title> 
    <script src="../lib/angular/angular.js"></script> 
    <script src="../lib/angular/angular-route.js"></script> 
    <script src="../resources/app.js"></script> 
    <script src="../resources/controllers.js"></script> 
</head> 
<body> 
    <div ng-view></div> 
</body> 
</html>

這裏是我的應用程序模塊（app.js）：

var bioSatApp = angular.module('bioSatApp', [ 
    'ngRoute', 
    'biosatAppControllers' 
]); 

bioSatApp.config(['$routeProvider', 
    function ($routeProvider) { 
     $routeProvider. 
      when('/maptypes', { 
       templateURL: 'partials/mapType-list.html', 
       controller: 'MapListCtrl' 
      }). 
      when('/maptypes/:type', { 
       templateURL: 'partials/mapType-detail.html', 
       controller: 'MapTypeCtrl' 
      }). 
      otherwise({ 
       redirectTo: '/maptypes' 
      }); 
    }]);

這裏是我的控制器模塊（controllers.js）：

var biosatAppControllers = angular.module('biosatAppControllers', []); 

biosatAppControllers.controller('MapListCtrl', ['$scope', '$http', 
    function ($scope, $http) { 
     $http.get('../resources/maptypes.json').success(function (data) { 
      $scope.mapTypes = data; 

     }); 
}]); 
biosatAppControllers.controller('MapTypeCtrl', ['$scope', '$routeParams', 
    function ($scope, $routeParams) { 
     $scope.type = $routeParams.type 
    }]);

這裏的地圖類型列表.html：

<select onchange="location = this.options[this.selectedIndex].value;"> 
    <option ng-repeat="map in mapTypes" value="#/maptypes/{{map.type}}"> 
     {{map.caption}} 
    </option> 
</select>

這裏的地圖類型，detail.html：

<div> 
    {{type}} 
    <div id="legendContainer" style="width: 300px; height: 800px; overflow-y: auto; float: left;">Legend Div</div> 
    <div id="mapDiv" style="height:800px;">Map Div</div> 
</div>

的maptypes.json是有效的JSON和它之前，我試圖ngRoute成功加載。

當我運行代碼時，它成功地將應用程序導航到/ maptypes（$ routeProvider中的其他語句）。但它不會顯示mapType-list html，它應該是一個簡單的下拉列表。我在控制檯或其他任何地方都沒有發現錯誤，說有些東西沒有正確加載或者沒有找到。此外，當我運行它的NG-視圖div元素：

<div ng-view></div>

GET與評論替代：

<!-- ngView: -->

我敢肯定，這是很簡單的東西，我很想念或有錯，但是我一遍又一遍瀏覽了代碼，我再也看不到它了。

來源

2014-01-15 NBabel

而不是相當真棒Chrome擴展程序。試試這個：在控制檯類型中使用開發工具檢查元素：'angular.element（$ 0）.scope（）'並查看它輸出的內容。 – TheSharpieOne

它說未定義。 – NBabel

哈，菜鳥的錯誤。 when方法使用templateUrl而不是templateURL。 – NBabel

試着改變你的應用程序配置到

app.config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) { 
     $locationProvider.html5Mode(true); 
     //Your routing here...

同時添加<base href="/">到HTML文件的頭。

來源

2014-01-15 22:14:51 Zorba

同樣的結果，只是有一個縮短的網址。 – NBabel

在這裏我也使用相同的代碼

sample1.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp"> 
<head> 
    <title>Test</title> 
</head> 
<body> 
    <div ng-view></div> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script src="app1.js"></script> 
    <script src="controllers.js"></script> 
</body> 
</html>

隨着APP1的例子。JS我做了你不一樣，因爲我刪除從這裏2線：

var bioSatApp = angular.module('bioSatApp', [ 
    'ngRoute', 
    'biosatAppControllers' 
]);

'ngRoute'
'biosatAppControllers'

，也是我改變templateURL爲templateUrl

這是結果LT沒有2線：

var bioSatApp = angular.module('bioSatApp', []); 

bioSatApp.config(['$routeProvider', 
    function ($routeProvider) { 
     $routeProvider. 
      when('/maptypes', { 
       templateUrl: 'templates/mapType-list.html' 
      }). 
      when('/maptypes/:type', { 
       templateUrl: 'templates/mapType-detail.html', 
       controller: 'MapTypeCtrl' 
      }). 
      otherwise({ 
       redirectTo: '/maptypes' 
      }); 
    }]);

所有其他文件都是相同

來源

2015-02-26 17:38:56

爲什麼我的angularJS應用程序中的作用域爲空？

回答

相關問題