angularjs: scope issue in directive when using $compile

Question

I'm having an issue with scope lost when using $compile to create a dynamic template for my directive. See the code below (trimmed for clarity) :

(function () {
'use strict';

angular.module('cdt.dm.directives').directive('serviceSources', ['$http', '$templateCache', '$compile', '$parse',
function ($http, $templateCache, $compile, $parse) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            type: '=',
            sources: '='
        },
        link: function (scope, element, attr) {
            var template = 'Template_' + scope.type + '.html';

            $http.get(template, { cache: $templateCache }).success(function (tplContent) {
                element.replaceWith($compile(tplContent)(scope));
            });

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

that works and the html template is loaded.

the html template looks like:

<table>
<thead>
    <tr>
        <th>File</th>           
    </tr>
</thead>
<tbody data-ng-reapeat="src in sources">
    <tr>
        <td>{{src.fileName}}</td>
    </tr>
</tbody>

sources is an array with two elements. In the scope of the directive, it is definitely correct, but in the template, the ng-repeat is not working (I guess because sources is undefined at this stage).

Does someone know what I'm doing wrong ?

No, the template needs to be dynamic, based on the value passed to the 'type' variable on the scope. So I cannot use templateUrl. — Sam
– Sam, Commented Oct 4, 2013 at 14:38
I've edited the original code as per your recommendation, thanks. — Sam
– Sam, Commented Oct 4, 2013 at 16:06
sorry, forgot to tell you to wrap the code inside scope.$apply. Check my updated answer. — Khanh TO
– Khanh TO, Commented Oct 6, 2013 at 8:58

Khanh TO · Accepted Answer · 2013-10-06 08:56:47Z

2

I think there is a typo: ng-repeat instead of data-ng-reapeat, and ng-repeat should be placed on <tr>

<table>
<thead>
    <tr>
        <th>File</th>           
    </tr>
</thead>
<tbody>
    <tr ng-repeat="src in sources">
        <td>{{src.fileName}}</td>
    </tr>
</tbody>

Note that $http.get is asyn and remember to wrap the code inside scope.$apply. You should modify your code like this:

link: function (scope, element, attr) {
            var template = 'Template_' + scope.type + '.html';

            $http.get(template, { cache: $templateCache }).success(function (tplContent) {
              scope.$apply(function(){ 
                element.replaceWith(tplContent);
                $compile(element)(scope);
                //Or
                //element.html(tplContent);
                //$compile(element.contents())(scope);
               });
            });
        }

edited Oct 6, 2013 at 8:56

answered Oct 5, 2013 at 12:26

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

francisco.preller Over a year ago

ng-repeat and data-ng-repeat are interchangeable. Same goes for all directives, they can all have data prefixed to them, even custom made directives.

Khanh TO Over a year ago

@francisco.preller: if you look closely, you will see reapeat instead of repeat

francisco.preller Over a year ago

Oh yeah, you're absolutely right. Thought you meant the latter. My bad :)

Khanh TO Over a year ago

@francisco.preller: I meant both actually. In the question, I see: the ng-repeat is not working (I guess because sources is undefined at this stage) . I thought the OP was referring to ng-repeat and I also did not know about data-ng-repeat, though. (I usually use ng-repeat this way). Thanks for pointing out data-ng-repeat

Sam Over a year ago

Sometimes instead of working late on a Friday evening and posting dumb questions on SO I should just enjoy the weekend.... :) Thanks a lot people for spotting the typo, that was just it... And also thanks for the great insights regarding $http.get, I wasn't finished with that and I'm going to improve it now based on your comment @Khanh TO.

Collectives™ on Stack Overflow

angularjs: scope issue in directive when using $compile

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related