angularjs: scope issue в директиве при использовании $ compile

Question

У меня возникла проблема с областью, потерянной при использовании компиляции $, чтобы создать динамический шаблон для моей директивы. Смотрите ниже код (обрезанный для ясности):

(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); 
     } 
    } 
} 
]) 
})(); 

, который работает и шаблон HTML загружается.

шаблон HTML выглядит следующим образом:

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

источников представляет собой массив из двух элементов. В рамках директивы это определенно правильно, но в шаблоне ng-repeat не работает (я думаю, потому что на данном этапе источники не определены).

Кто-нибудь знает, что я делаю неправильно?

Answer 1

Я думаю, что есть опечатка: ng-repeat вместо data-ng-reapeat и ng-repeat должны быть размещены на <tr>

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

Обратите внимание, что $http.get является ASYN и не забудьте обернуть код внутри scope.$apply. Вы должны изменить свой код следующим образом:

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); 
       }); 
      }); 
     }