个人中心
gpt4 book ai didi

javascript - Angular 无法识别我的 Controller

转载 作者：行者123 更新时间：2023-11-30 07:37:14 25 4
gpt4 key购买 nike

我有一个项目，其中 homeapp.js 包含 angular.module 依赖项:

var HomeApp = angular.module('HomeApp', [
                'ngRoute',
                'ngCookies',
                    'HomeControllers',
                    'metadataControllers',
                    'MyControllers',
                    'ScheduleControllers'
                ]);

HomeApp.config(['$routeProvider',
                function($routeProvider) {
                  $routeProvider.
                    when('/schedules', {
                        templateUrl: 'pages/list_schedule.html',
                        controller: 'ScheduleControllers'
                    });

在 ScheduleController.js 中，我有:

angular.module('ScheduleControllers', []).controller('PhoneListCrl', function($scope) {
    $scope.phones = [
        {'name': 'Nexus S',
        'snippet': 'Fast just got faster with Nexus S.'},
        {'name': 'Motorola XOOM with Wi-Fi',
        'snippet': 'The Next, Next Generation tablet.'},
        {'name': 'MOTOROLA XOOM',
        'snippet': 'The Next, Next Generation tablet.'}
    ];
});

这基本上是 Angular 教程中的代码片段。

在 index.html 中，我有:

<html lang="en-CA" ng-app="HomeApp">
...
<li id="id_schedule_list" class="header_list"><a href="#schedules" class="link_without_underline">List Schedule</a></li>
...

然后仅使用以下代码指向 schedules.html:

<div>
    <div ng-controller="PhoneListCrl">
        <p>{{phones}}</p>
    </div>
</div>

但是，当从浏览器打开 html 时，它会直接显示 {{phones}}，而无法显示完整的 json 对象。控制台显示

https://docs.angularjs.org/error/ng/areq?p0=ScheduleControllers&p1=not%20a 1.#QNAN0unction%2C%20got%20undefined

这对我来说并没有真正的意义，但我猜它是说 ScheduleControllers 是未定义的。

编辑:

在 angluar 的教程中，app.js 说:

var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatAnimations',
'phonecatControllers',
'phonecatFilters',
'phonecatServices'
]);

然后在 controllers.js 中，它有:

var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
function($scope, Phone) {
$scope.phones = Phone.query();
$scope.orderProp = 'age';
}]);

看起来我几乎完全按照教程做的，但为什么它对我不起作用？

最佳答案

问题其实出在路线上。您正在为 Controller 使用模块的名称，而不是实际的 Controller 名称。

在您拥有 controller: 'ScheduleControllers' 的地方，您需要 controller: 'PhoneListCtrl'。此外，您粘贴的代码在 Controller 定义中有错字。你需要一个 t 在 PhoneListCtrl 中 

angular.module('ScheduleControllers', []).controller('PhoneListCtrl',     function($scope) `

编辑

在下面的代码中，您告诉 Angular 在访问/schedules 路由时加载哪个 Controller 。现在，它指向“ScheduleControllers”，这是一个模块，而不是 Controller 。更改它以匹配第二个 block ，您应该可以开始了。

HomeApp.config(['$routeProvider',
            function($routeProvider) {
              $routeProvider.
                when('/schedules', {
                    templateUrl: 'pages/list_schedule.html',
                    controller: 'ScheduleControllers'
                });

HomeApp.config(['$routeProvider',
            function($routeProvider) {
              $routeProvider.
                when('/schedules', {
                    templateUrl: 'pages/list_schedule.html',
                    controller: 'PhoneListCtrl'
                });

参见 https://docs.angularjs.org/tutorial/step_07供引用。

关于javascript - Angular 无法识别我的 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29404468/

25 4 0
文章推荐： java - 使用 Eclipse (Java) 连接到 SQLite 数据库
文章推荐： java - 使用 log4j 迁移到 log4j2 以及引用的库
文章推荐： Java2d : Option to show a selection window when mouse is dragged
文章推荐： java - Jsoup tagName() 给出错误的标签
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com