I wrote a code with angularjs that uses a directive to bring a list of categories from show-category.html file and show them on the index page, I did everything as I've learned but still can't get the categories to be displayed when index.html is loaded.
inside app.js file
app.directive('showCategories', function() {
return {
restrict: 'E',
templateUrl: 'show-categories.html'
};
});
you can see the full code on plunker here: http://plnkr.co/edit/FSsNAq?p=preview
You placed your directive definition right in the middle of the controller, take it outside and it works (barring some other non-existing functions you have there):
app.controller("BookCtrl", function($scope) {
$scope.categories = [{
"id": 0,
"name": "Type"
}, {
"id": 1,
"name": "Date"
}, {
"id": 1,
"name": "Name"
}
];
...
});
app.directive('showCategories', function() {
return {
restrict: 'E',
templateUrl: 'show-categories.html'
};
});
