2

我的 $scope 中有一个产品列表。我的产品如下所示：

function myController($scope) {
  $scope.products = [
    { id:1, name:"hamburger", image:"/img/hamburger.png" },
    { id:2, name:"fries", image:"/img/fries.png" },
    { id:3, name:"hot dog", image:"/img/hotDog.png" }
    ...
  ];
}

我有一个名为 food.html 的文件。该文件如下所示：

<div>
  <div>{{name}}</div>
  <div><img ng-src="{{image}}" /></div>
</div>

我正在尝试通过中继器在 index.html 中显示我所有使用 food.html 呈现的产品的列表。我怎么做？目前，我有这样的事情：

<div ng-controller="myController">
  <div>Total Food Items: {{products.length}}</div>
  <div ng-repeat="product in products">
  </div>
</div>

我不知道如何使用 food.html 渲染每个产品。我该怎么做呢？谢谢！

4

2 回答 2

4

如果您想使用 food.html 作为模板，请为其创建指令。

angular.module('MyApp').directive('foodDetail', function() {
return {
    restrict: 'A',
    template: '<div> <div>{{product.name}}</div> <div><img ng-src="{{product.image}}" /></div></div>',

    }
});

而 index.html 应该是 

<div ng-controller="myController">
    <div>Total Food Items: {{products.length}}</div>
    <div ng-repeat="product in products">
    <div food-detail></div>
    </div>
</div>
于 2013-10-18T14:32:06.807 回答
0

索引.html：

<html ng-app="myApp">
    <!-- ... some code ... -->
    <div data-ng-view></div>
    <!-- ... some more code ... -->
</div>

食物.html：

<div>Total Food Items: {{products.length}}</div>
<div ng-repeat="product in products">
    <div>{{name}}</div>
    <div><img ng-src="{{image}}" /></div>
</div>

然后，在 app.js 中使用类似这样的内容配置您的路由：

myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/food', {
        templateUrl: 'food.html',
        controller: 'myController'
    })
});

这是一个包含更多信息的资源：http: //docs.angularjs.org/tutorial/step_07

于 2013-10-18T14:07:23.267 回答