$scope 不工作，内容不填充

Question

我已经看了好几天了，不明白为什么我的内容没有填充我页面上的胡须！我得到的唯一错误消息是 $scope 没有定义，但我不确定问题出在哪里。任何帮助将不胜感激 - 谢谢！

itemlistcontroller.js 文件：

vegApp.controller('itemListController', function ($scope){
$scope.items = [
        {imageurl: 'images/strawb.jpg', type: 'strawberry', name: 'Herbert     Strawberry', occupation: 'dogwalker', superpower: 'power-C boost'},
        {imageurl: 'images/blueb.jpg', type: 'blueberry', name: 'Ulysses  Blueberry', occupation: 'construction worker', superpower: 'super strength' },
        {imageurl: 'images/orange.jpg' , type: 'orange', name: 'Otto Sly Orange', occupation: 'ninja', superpower: 'serious defense' }
    ]});
    $scope.new_item = {};
$scope.add_item_error = "";

$scope.additem = function(item){
        $scope.items.push( item );
        $scope.adding_item = {};
    };

    console.log('scope', $scope);
]);

app.js 文件：

var vegApp = angular.module('vegApp', []);

vegApp.config(['$routeProvider', function($routeProvider){

    $routeProvider
    .when('/', {
        templateUrl: 'index3.html',
        controller: 'itemListController'
    })
    .when('/login', {
        templateUrl: 'partials/login.html',
        controller: 'registration'
    })
    .when('/moreinfo', {
        templateUrl: 'partials/moreinfo.html',
        controller: 'moreinfo'
    })
    .when('/recipes', {
        templateUrl: 'recipes.html',
        controller: 'recipes'
    })
    .otherwise({
        redirectTo: '/login'
    });
}
]);

HTML 文件：

<html ngApp="vegApp">
<head>
<link rel="stylesheet" text="text/css" href="css/bootstrap.css">
<link rel="stylesheet" text="text/css" href="css/style.css">
<script type="text/javascript" src="angular/js/angular.js"></script>
<script src="text/javascript" src="angular/js/angular-route.js"></script>
  <script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>
<body ng-controller='itemListController'>

<ng-view>


<div class="main">
  <h2>Summon your Vitamin Power</h2>
  <form name="add_item_form" novalidate ng-submit="additem()">
    <input type="text" placeholder="what'd you eat?" ng-model="searchFor" ng-required="true"/>

    <button ng-click="additem()" ng-disabled="add_item_form.$invalid" class="btn btn-success">Add to Your Arsenal</button>

    <ul class = "itemgroup" ng-repeat= "item in items | filter:searchFor">
      <div class="adding_item">
        <li ng-model="items.imageurl">
          <img ng-src ="{{ item.imageurl }}" alt="{{ item.type }}">
        </li>
        <li ng-model="items.type">
          {{ item.type }}
        </li>
        <li ng-model="items.name">
          {{ item.name }}
        </li>
        <li ng-model="items.occupation" >
          {{ item.occupation }}
        </li>
        <li ng-model="items.superpower">
          {{ item.superpower }}
        </li>
      </div>
    </ul>

  </form>

</div>

</div>
</ng-view>
</body>
</html>

Answer 1

更新：

似乎在您的 HTML 中，您将列表项的 ng-model 设置为“items.”。这没有任何意义，因为例如 $scope.items 中没有属性“类型”；它是一个数组。相反，由于 'item' 已经是对范围内项目的引用，因此您可以简单地编写 ng-model="item"。在您的 HTML 中。

您的 itemListController 看起来有点畸形。您的函数在您定义 $scope.items 后立即结束，因此 $scope 不在您控制台记录 $scope 的范围内。尝试用这个替换你的 itemlistcontroller.js：

vegApp.controller('itemListController', function ($scope) {
    $scope.items = [
        {
            imageurl: 'images/strawb.jpg',
            type: 'strawberry',
            name: 'Herbert     Strawberry',
            occupation: 'dogwalker',
            superpower: 'power-C boost'
        },
        {
            imageurl: 'images/blueb.jpg',
            type: 'blueberry',
            name: 'Ulysses  Blueberry',
            occupation: 'construction worker',
            superpower: 'super strength'
        },
        {
            imageurl: 'images/orange.jpg',
            type: 'orange',
            name: 'Otto Sly Orange',
            occupation: 'ninja',
            superpower: 'serious defense'
        }
    ];
    $scope.new_item = {};
    $scope.add_item_error = "";

    $scope.additem = function (item) {
        $scope.items.push(item);
        $scope.adding_item = {};
    };

    console.log('scope', $scope);
});