SO - 15199067
HTML
<div ng-app="test" ng-controller="MenuController">
<menu which="Brunch"></menu>
<menu which="Lunch"></menu>
<menu which="Dinner"></menu>
</div>
JavaScript
var app = angular.module('test', []);
app.factory('TestXXX', function () {
return {
test: function() { alert('tested'); }
};
});
app.directive('menu', function () {
return {
restrict: 'E',
template: '<div id="menu-{{which}}" class="tab-pane">' +
' <div>' +
' <div ng-repeat="item in menu.items">' +
' <h3>{{menu.name}}</h3>' +
' <p>{{menu.description}}</p>' +
' <menuitems model="menu.items" ></menuitems>' +
' </div>' +
' </div>' +
'</div>',
replace: true,
scope: {
which: '@',
init: '&'
},
controller: function ($scope, TestXXX) {
TestXXX.test();
$scope.$watch('which', function (which) {
$scope.menu = {
'name': which + ' Menu',
'description': which + ' Description',
items: [{
'name': which + ' Item',
'description': which + ' Item Description',
'price': '1.99'
}]
};
});
}
};
});
app.directive('menuitems', function () {
return {
template: "<ul class='media-list'><li ng-repeat=\"item in model\"> <div class='pull-right'>{{item.price}}</div><div class=\"media-body\"> <h4 class=\"media-heading\">{{item.name}}</h4><p ng-bind-html-unsafe=\"item.description\"></p></div></li></ul>",
restrict: 'E',
replace: true,
scope: {
'model': '=model'
}
};
});
app.controller('MenuController', function ($scope) {
$scope.loadMenu = function (which) {
};
$scope.menuItems = {
'name': 'test',
'description': 'description',
items: [{
'name': 'test 1',
'description': 'item...