CODEWITHSUNDEEP
angularjsangularjs-directive
Danila Belov
Danila Belov

Reputation: 83

angular templateUrl to replace template

I have been trying to load files instead inline html.

I have an template example PLNKR 

var app = angular.module('myApp', []);

app.directive('contentItem', function ($compile) {
    var imageTemplate = '<div class="entry-photo"><h2>&nbsp;</h2><div class="entry-img"><span><a href="{{rootDirectory}}{{content.data}}"><img ng-src="{{rootDirectory}}{{content.data}}" alt="entry photo"></a></span></div><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.description}}</div></div></div>';
    var videoTemplate = '<div class="entry-video"><h2>&nbsp;</h2><div class="entry-vid"><iframe ng-src="{{content.data}}" width="280" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.description}}</div></div></div>';
    var noteTemplate = '<div class="entry-note"><h2>&nbsp;</h2><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.data}}</div></div></div>';

    var getTemplate = function(contentType) {
        var template = '';

        switch(contentType) {
            case 'image':
                template = imageTemplate;
                break;
            case 'video':
                template = videoTemplate;
                break;
            case 'notes':
                template = noteTemplate;
                break;
        }

        return template;
    }

    var linker = function(scope, element, attrs) {
        /* scope.rootDirectory = 'images/'; */

        element.html(getTemplate(scope.content.content_type))/* removed ".show()" */;

        $compile(element.contents())(scope);
    }

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

function ContentCtrl($scope, $http) {
    "use strict";

    $scope.url = 'content.json';
    $scope.content = [];

    $scope.fetchContent = function() {
        $http.get($scope.url).then(function(result){
            $scope.content = result.data;
        });
    }

    $scope.fetchContent();
}

I am wondering how to make it to load templates from urls - load image.html I was trying to replace template to templateUrl - that did not do much unfortunately.

Could you advice me how to do this right please

Upvotes: 0

Views: 1590

Answers (2)

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

at the first you can use ng-view for setting the template URL

this is a working example plunc

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

    templates = {
      image: 'image.html',
      video: 'video.html',
      notes: 'note.html'

    }

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

    }

    return {
        restrict: "E",
        replace: true,
        link: linker,
        scope: {
          content: '='
        },
        template: '<div ng-include="setUrl()"></div>'
    };
});

Upvotes: 2

Polochon
Polochon

Reputation: 2219

in your code you declare a directive but you dont use any of its templating options. You need to refactor your code to use the directive templating with the templateUrl option.

directive('directiveName', function(){
    // Runs during compile
    return {
        // name: '',
        // priority: 1,
        // terminal: true,
        // scope: {}, // {} = isolate, true = child, false/undefined = no change
        // controller: function($scope, $node, $attrs, $transclude) {},
        // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        // template: '',
        // templateUrl: '', //you need it
        // replace: true,
        // transclude: true,
        // compile: function(tElement, tAttrs, function transclude(function(scope){ return function linking(scope, $node, attrs){}})),
        link: function($scope, iElm, iAttrs, controller) {

        }
    };
});

If you still want to simulate a templating behaviour you shall use the $http service to get your template html from your server and load it.*

In this case you should create a service or a factory which are a singleton and inject $http and store the response template in a variable in order to don't call the server many times. But I think it's a bad idea to recode a directive feature.

Upvotes: 1

Related Questions