Question

我刚开始学习Angular，通过代码课程。这是我的第一个框架。我正在尝试使用ng-repeat构建一个非常非常简单的菜单。这与codechool课程中的第一个项目非常相似，但似乎我可能误解了某些内容，或者在课程的这一点上可能存在一个未充分涵盖的概念。我已经回过头来重新录制了一些视频，这些视频涵盖了我需要知道的构建它的内容，而且我看不出会阻止它工作的原因。我需要让球在这里滚动。在我的指令中是错误的吗？

 <html ng-app = 'menu'>
  <body ng-controller = 'MenuController as menu'>
    <section ng-repeat="menuItem in menu.menuItem">
      <h1> {{menuItem.name}} </h1>
      <p> {{menuItem.description}} </p>
      <h3> {{menuItem.price}} </h3>
    </section>
  </body>
</html>

继承人JS：

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

app.controller("MenuController", function(){
  this.menuItem = appetizers;
});

var appetizers = [{
    name : "Seared Ahi Tuna",
    decription : "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze",
    price : "12"
},
{
    name : "Artisan Cheese Board",
    decription : "Five chef-selected cheeses from WI farms (Sorry, no happy hour)",
    price : "12"
}...

codepen

Answer 1

您的错误是Failed to instantiate module menu您可能会遇到此错误的几种可能性，但在这种情况下，它是因为找不到模块菜单。如果你看看你的代码

(function(){

var app = angular.module('menu', []);
....
});

请注意，您实际上从未调用匿名函数，因此代码永远不会实际运行。您所要做的就是调用功能＆amp;一切正常。

(function(){

var app = angular.module('menu', []);
....
})();

Answer 2

您的codepen将您的脚本文件作为IIFE，但最后缺少调用()，因此它永远不会运行。如果删除IIFE定义(function(){ ... });或将调用添加到末尾})();，代码将完全正常运行。

注意，这与Angular没有直接关系，它更像是一个JavaScript语义问题......不要让这个让你停止使用Angular！

Answer 3

你必须按照Austin的说法执行匿名函数，但代码也错了。通常最好将范围注入控制器，以便通过ng-repeat命令访问该项目。

(function() {

  var app = angular.module('menu', []);

  app.controller("MenuController", function($scope) {
    $scope.menuItem = appetizers;
  });

  var appetizers = [{
    name: "Seared Ahi Tuna",
    decription: "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze",
    price: "12"
  }, {
    name: "Artisan Cheese Board",
    decription: "Five chef-selected cheeses from WI farms (Sorry, no happy hour)",
    price: "12"
  }, {
    name: "Oysters on the Half Shell*",
    decription: "Fresh Blue Points from the Delaware Bay",
    price: "1/2 Order 10, Full Dozen 16"
  }, {
    name: "Chorizo Sliders",
    decription: "Three sliders on pretzel buns with sauteed onion, fried pickle chip and grained mustard",
    price: "9"
  }, {
    name: "Tenderloin Lollipops*",
    decription: "Served over a bed of red wine garlic mushrooms",
    price: "10"
  }]
})();

section {
  border: 1px solid grey;
  width: 50%;
  margin: 0 auto;
}

<html ng-app='menu'>

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller='MenuController'>
  <section ng-repeat="item in menuItem">
    <h1> {{item.name}} </h1>
    <p>{{item.description}}</p>
    <h3> {{item.price}} </h3>
  </section>
</body>

</html>

Answer 4

您需要在使用之前包含AngularJS Framework，而不是注入范围。原始调用具有匿名功能但不执行它。

＆＃13;

var app = angular.module('menuApp', []);




app.controller("MenuController", ['$scope',
  function($scope) {

    $scope.appetizers = [{
      name: "Seared Ahi Tuna",
      decription: "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze",
      price: "12"
    }, {
      name: "Artisan Cheese Board",
      decription: "Five chef-selected cheeses from WI farms (Sorry, no happy hour)",
      price: "12"
    }, {
      name: "Oysters on the Half Shell*",
      decription: "Fresh Blue Points from the Delaware Bay",
      price: "1/2 Order 10, Full Dozen 16"
    }, {
      name: "Chorizo Sliders",
      decription: "Three sliders on pretzel buns with sauteed onion, fried pickle chip and grained mustard",
      price: "9"
    }, {
      name: "Tenderloin Lollipops*",
      decription: "Served over a bed of red wine garlic mushrooms",
      price: "10"
    }];



    $scope.menu = $scope.appetizers;
  }
]);

＆＃13;

section {
  border: 1px solid grey;
  width: 50%;
  margin: 0 auto;
}

＆＃13;

<html ng-app='menuApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js"></script>
</head>

<body ng-controller='MenuController'>
  <section ng-repeat="menuItem in menu">
    <h1> {{menuItem.name}} </h1>
    <p>{{menuItem.description}}</p>
    <h3> {{menuItem.price}} </h3>
  </section>
</body>

</html>

＆＃13;

我的Angular表达式不会从数组中获取数据

4 个答案: