2013-09-19 3 views
2

Я пытаюсь изучить особенности маршрута angularJS, но то, что я до сих пор не работало, не работает.Поставщик маршрута не может получить доступ к определениям контроллеров

Если я когда-либо нажмите кнопку Load, Display, или Play (в моем примере: ссылки на возможные URLs действия) затем <div ng-view></div> все еще существуют в DOM (когда я проверить его), кроме того, он не заменяется соответствующей HTML частичный файл, как указано в шаблоне url поставщика маршрута.

Журнал консоли Хром отображает сообщение об ошибке: Uncaught ReferenceError: LoadCtrl is not defined from my_app

Если я ставлю все на when в комментариях при определении поставщика маршрута, то ошибка больше не выброшен.

Поэтому я думал, что это может зависеть от порядка определения контроллеров относительно определения поставщика маршрута. Поэтому я попытался поместить их до или после, также в отдельный файл controller.js ... Но это ничего не меняет.

Я полагаю, что совершу явную ошибку, но я не могу ее поймать. Есть идеи ?

содержание index.html:

<!DOCTYPE html> 
<html ng-app="my_app"> 
<body> 
    <section class="section_command"> 
     <ul> 
      <li><a href="#/load">Load file</a></li> 
      <li><a href="#/display">Display file</a></li> 
      <li><a href="#/play">Play file</a></li> 
     </ul> 
    </section> 
    <section class="section_content"> 
     <div ng-view></div> 
    </section> 

<script type="text/javascript" src="js/angular.js"></script> 
<script type="text/javascript" src="js/app.js"></script> 
</body> 
</html> 

app.js содержание:

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

app.controller('LoadCtrl', function($scope, $http, $routeParams){}); 
app.controller('DisplayCtrl', function($scope, $http, $routeParams){}); 
app.controller('PlayCtrl', function($scope, $http, $routeParams){}); 

app.config(['$routeProvider', function($routeProvider) 
{ 
    $routeProvider. 
     when('/load', {templateUrl: 'partials/load.html', controller: LoadCtrl}). 
     when('/display', {templateUrl: 'partials/display.html', controller: DisplayCtrl}). 
     when('/play', {templateUrl: 'partials/play.html', controller: PlayCtrl}). 
     otherwise({redirectTo: '/'}); 
}]); 

частичные HTML файлы так же просто, как может быть:

load.html: <span>Loading</span>

display.html: <span>Displaying</span>

play.html: <span>Playing</span>

ответ

3

Я уверен, что вам нужно решить ваши контроллеры от их имени строки:

when('/load', {templateUrl: 'partials/load.html', controller: 'LoadCtrl'}). 
+0

хехе ... но у меня есть новая ошибка :). Очевидно, ваша коррекция синтаксиса выполнила эту работу. Нужно скорректировать учебный документ angularjs. Ну ... Я сейчас посмотрю на эту новую ошибку, когда она попытается загрузить мои частичные html-файлы. Спасибо. –

+0

Нет проблем. :) Все выглядит правильно. Убедитесь, что ваш каталог «partials» находится из вашего веб-корня. Удачи. –

+1

Моя новая ошибка, кажется, ответила здесь http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin, потому что я тестирую свой файл webapp с файлом: //, а не http: // –

Смежные вопросы