While going through a Coursera course on AngularJS I have run into an issue with a controller, the issue being that the console says it's not defined.
When I run it through https://validator.w3.org/ it keeps saying attribute ng-(something) not allowed on element div or html or li, but I don't think that's the problem.
I tried putting single quotation marks around different things as suggested by answers of similar questions, nothing happened.
Html code:
<!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:stuffcoursera htmlasic.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 code:
(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;
};
}
})();
↓Picture of the console↓
However, if I paste this whole thing into the text editor the console doesn't display any errors, but the site doesn't respond as it should.↓
(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;
}
})();
