在AngularJS中创建数据模板

我有我的$范围中的产品列表。我的产品如下所示：在AngularJS中创建数据模板

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>

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

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

我卡住了如何使用food.html呈现每个产品。我该怎么做呢？谢谢！

来源

2013-10-18 user2871401

如果您想使用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-18 14:32:06

出于某种原因，我似乎无法让你进入到呈现模板。它错过了什么吗？ – user2871401

我在这里创建了plunkr：[link] http://plnkr.co/edit/Z5SBYn1jKBeLVXXgnm5i?p=preview –

的index.html：

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

Food.html：

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

这里是一个：

<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像这样配置的路由有更多资料的资源：http://docs.angularjs.org/tutorial/step_07

来源

2013-10-18 14:07:23

在AngularJS中创建数据模板

回答

相关问题