Difference between template and templateUrl in angular js directive in isolated scope

Question

I have a directive in isolated scope and i define a couple of variables in link function of the directives so the template fails to bind to these variables but templateUrl seems to bind to these variables easily... what is the reason for this?

mymodule.directive("directive1", function () {

    return {



        require: '^widget',

        // template: '<div><h1 > {{editMessage}}</h1></div>',
        templateUrl: "dummy.htm",


        scope: {
    },

    link: function (scope, element, attrs) {


        scope.editMessage = "Click to edit";
 });
}
});

my dummy.htm has the same piece of code as in template contents:-

 <div><h1 > {{editMessage}}</h1></div>

the binding happens when i use templateUrl but not when i use template why is it so? is the execution flow different for both of these?

Can you provide a plunker to show the issue? This should work. — Davin Tryon
What version of Angular are you using? This is really strange behaviour. Reproducing the problem in plunker/jsfiddle as Davin says would greatly help you. — Nikos Paraskevopoulos
What is been rendered in the remote template case <div><h1 > {{editMessage}}</h1></div> — Chandermani
Here's a quick plunk using both. You've got a bunch of extra stuff in your directive. Maybe you aren't passing in a the required widget when you are using it? At the very least, you need to provide the code where you are using the directive, as well. plnkr.co/edit/CjtctNyAg8sRbh8CFUjm — bjtitus

allel allel · Accepted Answer · 2015-05-28T16:23:30

the problem is you're not integrating well the scope variable, it should be and this example:

mymodule.directive('myAlertaSeguimientoButton', function() {
return {
    restrict: 'A',
    scope: {
        myParamElemento: '=',
        myParamUrl: '@',
        myParamSeguir: '@',
        myParamDejarSeguir: '@',
        myParamSiguiendo: '@',
        myParamRefrescaMapa: '@'
    },
    template: '<button ng-class="(!myParamElemento.siguiendo)?\'btn btn-default seguir\':\'btn btn-default seguir siguiendo activeButtonAzul\'" class="btn btn-default seguir" ng-click="seguirNoSeguir(myParamUrl)"><span class="icon-seguir estadoUno">[[myParamSeguir]]</span><span class="icon-siguiendo icon-w estadoDos">[[myParamSiguiendo]]</span><span class="estadoTres">[[myParamDejarSeguir]]</span></button>',
    controller: ['$scope', 'Service', function($scope, Service) {...

And in the html:

<span my-param-elemento="angular-var" my-param-url="angular-var" my-alerta-seguimiento-button></span>

Difference between template and templateUrl in angular js directive in isolated scope

1 Answers