0

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

Sam Joni
  • 159
  • 2
  • 14

1 Answers1

1

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'


    };
});

Plunker

Omri Aharon
  • 16,959
  • 5
  • 40
  • 58
  • I didn't know how this mistake has passed me, thanks man!! I intended to show only the necessary code for you to understand the problem without getting confused by other functions, since my app is much longer than this.. – Sam Joni Nov 11 '15 at 08:22