javascript - 未捕获的 ReferenceError:未定义控制器
问题描述
在学习有关 AngularJS 的 Coursera 课程时,我遇到了一个控制器问题,问题是控制台说它没有定义。
当我通过https://validator.w3.org/运行它时,它一直说元素 div 或 html 或 li 上不允许使用属性 ng-(something),但我认为这不是问题所在。
我尝试按照类似问题的答案将单引号括在不同的事物上,但什么也没发生。
html代码:
<!DOCTYPE html>
<html ng-app='ShoppingListDirectiveApp'>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-resource.js">
</script>
<script src="app.js"></script>
<link rel="stylesheet" href="D:\stuff\coursera html\basic.css">
<title>Directives with Their Own Controllers</title>
</head>
<body>
<h1>Directives with Their Own Controllers
</h1>
<h3>{{ list.title }}</h3>
<ol>
<li ng-repeat="item in list.items">
{{ item.quantity }} of {{ item.name }}
<!-- <button ng-click="list.removeItem($index);">remove item</button> -->
</li>
</ol>
<div class="error" ng-if="list.cookiesList()"> warning cookies detected</div>
<!-- LIST #1 - unlimited items -->
<div id="list" ng-controller='ShoppingListController as list'>
<input type="text" ng-model="list.itemName" placeholder="item name">
<input type="text" ng-model="list.itemQuantity" placeholder="quantity">
<button ng-click="list.addItem();">Add Item
</button>
<shopping-list items="list.items" title="{{list.title}}"></shopping-list>
</div>
</body>
</html>
JS代码:
(function () {
'use strict';
angular.module('ShoppingListDirectiveApp', [])
.controller('ShoppingListController', ShoppingListController)
.factory('ShoppingListFactory', ShoppingListFactory)
.controller('ShoppingListDirectiveController', ShoppingListDirectiveController)
.directive('shoppingList', ShoppingListDirective);
function ShoppingListDirective() {
var ddo = {
//templateUrl: 'shoppingList.html',
scope: {
items: '<',
title: '@'
},
// controller: 'ShoppingListDirectiveController as list',
controller: ShoppingListDirectiveController,
controllerAs: 'list',
bindToController: true
};
return ddo;
}
function ShoppingListDirectiveController() {
var list = this;
list.cookiesInList = function () {
for (var i = 0; i < list.items.length; i++) {
var name = list.items[i].name;
if (name.toLowerCase().indexOf("cookie") !== -1) {
return true;
}
}
return false;
};
}
})();
但是,如果我将整个内容粘贴到文本编辑器中,控制台不会显示任何错误,但网站不会做出应有的响应。↓</p>
(function () {
'use strict';
angular.module('ShoppingListDirectiveApp', [])
.controller('ShoppingListController', ShoppingListController)
.factory('ShoppingListFactory', ShoppingListFactory)
.controller('ShoppingListDirectiveController', ShoppingListDirectiveController)
.directive('shoppingList', ShoppingListDirective);
function ShoppingListDirective() {
var ddo = {
// templateUrl: 'shoppingList.html',
scope: {
items: '<',
title: '@'
},
controller: 'ShoppingListDirectiveController as list',
// controllerAs: 'list',
bindToController: true
};
return ddo;
}
function ShoppingListDirectiveController() {
var list = this;
list.cookiesInList = function () {
for (var i = 0; i < list.items.length; i++) {
var name = list.items[i].name;
if (name.toLowerCase().indexOf("cookie") !== -1) {
return true;
}
}
return false;
};
}
ShoppingListController.$inject = ['ShoppingListFactory'];
function ShoppingListController(ShoppingListFactory) {
var list = this;
// Use factory to create new shopping list service
var shoppingList = ShoppingListFactory();
list.items = shoppingList.getItems();
var origTitle = "Shopping List #1";
list.title = origTitle + " (" + list.items.length + " items )";
list.itemName = "";
list.itemQuantity = "";
list.addItem = function () {
shoppingList.addItem(list.itemName, list.itemQuantity);
list.title = origTitle + " (" + list.items.length + " items )";
};
list.removeItem = function (itemIndex) {
shoppingList.removeItem(itemIndex);
list.title = origTitle + " (" + list.items.length + " items )";
};
}
// If not specified, maxItems assumed unlimited
function ShoppingListService(maxItems) {
var service = this;
// List of shopping items
var items = [];
service.addItem = function (itemName, quantity) {
if ((maxItems === undefined) ||
(maxItems !== undefined) && (items.length < maxItems)) {
var item = {
name: itemName,
quantity: quantity
};
items.push(item);
}
else {
throw new Error("Max items (" + maxItems + ") reached.");
}
};
service.removeItem = function (itemIndex) {
items.splice(itemIndex, 1);
};
service.getItems = function () {
return items;
};
}
function ShoppingListFactory() {
var factory = function (maxItems) {
return new ShoppingListService(maxItems);
};
return factory;
}
})();
解决方案
angular.module('ShoppingListDirectiveApp', [])
.controller('ShoppingListController', ShoppingListController)
我可以看到ShoppingListController
被调用但找不到ShoppingListController
方法。
angular.module('ShoppingListDirectiveApp', [])
.controller('ShoppingListController', function ($scope) {
})
或者
angular.module('ShoppingListDirectiveApp', [])
.controller('ShoppingListController', ShoppingListController)
function ShoppingListController($scope) {...}
推荐阅读
- vim - 是否可以删除 Vim 中的特定行,然后再恢复它们?
- r - pbcor 和 ggcorrmat 相关性在 R 中给出了不同的置信区间
- go - AWS API Gateway WebSockets [POST]@connections 返回 404 NotFound
- node.js - 如果字符限制超过 2045,则将“...”添加到 message.content 的末尾
- c++ - 为什么这个指针显示最后一个元素?
- python - 使用python ctype,匹配指针数组的类型和数组的类型时出错,该数组是一个C库函数的参数
- javascript - 如何在 sinon 中测试匿名函数?
- r - 如何将多个数据帧(.csv 文件)绑定到一个数据帧中
- google-apps-script - 在文件夹中创建电子表格文件而不使用 auth/drive 范围
- arrays - 试图将文本文件存储到数组中