Question

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

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

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>

Answer 1

我很确定你需要通过字符串名称来控制你的控制器：

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

路由提供程序无法访问控制器定义

1 个答案: