2

我正在尝试学习 angularJS 的路由功能，但到目前为止我所发生的事情并不起作用。

如果我曾经单击加载、显示或播放（在我的示例中：指向可能的操作 url 的链接）然后<div ng-view></div>仍然存在于 DOM 中（当我检查它时），而且它不会被相关的 html 部分文件替换，如路由提供者的templateUrl。

Chromium 日志控制台显示错误： Uncaught ReferenceError: LoadCtrl is not defined from my_app

如果我when在定义路由提供程序时将所有注释放入，则不再抛出错误。

所以我认为它可能取决于控制器的定义顺序关于路由提供者的定义。因此，我尝试将它们放在单独的 controllers.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>

4

1 回答 1

3

我很确定您需要通过它们的字符串名称来寻址您的控制器：

when('/load', {templateUrl: 'partials/load.html', controller: 'LoadCtrl'}).
于 2013-09-19T16:08:42.433 回答