AngularJS Directives: как скомпилировать html после обещания

Question

У меня есть директива, которая вызывает другую директиву, передающую некоторые значения как объект. Моя проблема в том, что шаблон компилируется до того, как обещание получить данные выполнено.

директива:

var directives = angular.module('app.directives', []); 
    directives.directive('mydirective', function (myService, $http, $compile) { 
     var templateUrl = "/some/file.html"; 
     return { 
      restrict: "AE", 
      scope: { 
       entry: "=" 
      }, 
      link: function (scope, element, attrs) { 
       var entry = scope.entry; 
       var template = { 
        //** some empty key - value pairs **// 
       }; 


       $http.get(templateUrl).then(function (response) { 
        element.html(response); 

        myService(entry.id, function (err, res) { 
         if (err) 
          throw err; 

         //** code to fill the template object **// 

         scope.seqplot = template; 
         $compile(element.contents())(scope); 
        }); 
       }); 
      } 
     }; 
    }); 

Шаблон (директива seqplot можно получить here):

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h3 class="panel-title"> 
      Some header 
     </h3> 
    </div> 
    <div class="panel-body"> 
     <div class="row" ng-repeat="x in seqplot.k2 track by $index"> 
      {{$index}} 
      <div class="col-md-4"> 
       {{seqplot.k1[$index]}} 
      </div> 
      <div class="col-md-8"> 
       <seqplot data-bar-width="666" 
         data-region-data="seqplot.k3" 
         data-regions='seqplot.k2[$index]' 
         data-seq="{{seqplot.k4}}" 
         data-gradient="true"></seqplot> 
      </div> 
     </div> 
    </div> 
</div> 

Парциальное где я называю директиву:

<div> 
    <h1 class="page-header">{{entry.name| uppercase}} <small> - {{entry.uniprot_id| uppercase}}</small> </h1> 
    <div mydirective data-entry="entry"></div> 
</div> 

И контроллер:

var ctrlEntry = controllers.controller('ctrlEntry', function ($scope, $location, $rootScope) { 

    var getEntry = function (obj_arr, id) { 
     for (var i = 0; i < obj_arr.length; i++) { 
      var curr = obj_arr[i]; 
      if (curr.id === id) { 
       return curr; 
      } 
     } 
    }; 

    var data = $rootScope.data; 

    var path = $location.path().split('/'); 
    var entry_id = path[path.length - 1]; 
    $scope.entry = getEntry(data, entry_id); 
}); 

Проблема заключается в том, что объект scope.seqplot объекта mydirective передается директиве seqplot до выполнения обратного вызова myService. Поэтому я подозреваю, что мне нужно каким-то образом перекомпилировать html-шаблон сразу после выполнения обратного вызова службы или заставить директиву ждать, чтобы скомпилировать шаблон до полного выполнения обратного вызова службы. Идеи? Благодаря тонну.

Answer 1

Инициализационная логика не относится к функции директивной ссылки. Лучшим случаем было бы использовать маршрутизатор (ngRoute/ui-router), который предоставит вам свойство resolve, где все инициализируется перед входом в интерфейс, чтобы все данные были готовы до компиляции директив.