未捕获的引用错误：未定义 controller

Question

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.在通过有关 AngularJS 的 Coursera 课程时，我遇到了 controller 的问题，问题是控制台说它没有定义。

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.当我通过https://validator.w3.org/运行它时，它一直说属性 ng-(something) not allowed on element div 或 html 或 li，但我认为这不是问题所在。

I tried putting single quotation marks around different things as suggested by answers of similar questions, nothing happened.我尝试按照类似问题的答案将单引号括在不同的事物上，但没有任何反应。

Html code: 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 code: 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;
  };
}

})();

↓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;
}

})();

Answer 1

    angular.module('ShoppingListDirectiveApp', [])
.controller('ShoppingListController', ShoppingListController)

I can see ShoppingListController being called but cannot find ShoppingListController method.我可以看到ShoppingListController被调用但找不到ShoppingListController方法。

angular.module('ShoppingListDirectiveApp', [])
    .controller('ShoppingListController', function ($scope) {

})

or或者

    angular.module('ShoppingListDirectiveApp', [])
        .controller('ShoppingListController', ShoppingListController)

  function ShoppingListController($scope) {...}

未捕获的引用错误：未定义 controller

问题描述

1 个解决方案

解决方案1
0 2021-01-27 07:08:42

未捕获的引用错误：未定义 controller

问题描述

1 个解决方案

解决方案1 0 2021-01-27 07:08:42

解决方案1
0 2021-01-27 07:08:42