How to load partials into view?

Question

I am trying to load partials into rooted page, with no luck so far. I have a promo-page with thumbs, which are different according to their type: wireframe.

It works fine when it is not loaded into rooted page: plunker example

This is example where I am trying to load partials: plunker example 2

myApp.directive('contentItem', function ($compile, $parse) {

    templates = {
      image: 'image.html',
      event: 'event.html',
      article: 'article.html',
      ad: 'ad.html',
      discount: 'discount.html',
      video: 'video.html'

    }

    var linker = function(scope, element, attrs) {
        scope.setUrl = function(){
          return templates[scope.content.content_type];
        }

    }

    return {
        restrict: "E",
        replace: true,
        link: linker,
        scope: {
          content: '='
        },
        templateUrl: 'main.html'
    };
});

Could you advice me please how to achieve this?

Answer 1

There was so much fundamentally wrong with your app, stupid small mistakes that would have taken you 5 minutes to sort out if you would have had a look at the js console.

I fixed your plunker here.

You had forgotten JQuery as a dependency, also you had forgotten to define a controller which you clearly use some where. And the list goes on.