Не удается найти элемент в postlink создания директивы в angularjs

Question

Я пытаюсь создать директиву для JustGauge в AngularJS. Моя точка зрения HTML-то вроде этого:

 <div id="guageContainer" class="row" ng-controller="guageCtrl"> 
      <gauge ng-repeat="ind in indicators" model="ind"></gauge> 
     </div> 

и моя директива:

angular.module("pgHome", []) 
.directive("gauge", function ($compile) { 
    return { 
     restrict: "E", 
     scope: { model: "=model" }, 
     compile: function (tElement, tAttrs, transclude) { 
      tElement.append('<div id="{{model.Name}}"></div>'); 
      return { 
       post: function (scope, iElement, iAttrs, controller) { 
        console.log(scope.model.Name); 
        console.log($("#" + scope.model.Name).length); 
        var g = new JustGage({ 
         id: scope.model.Name, 
         value: 348, 
         min: 120, 
         max: 400, 
         title: "test", 
         label: "" 
        }); 
       } 
      }; 
     } 
    }; 
}); 

Когда я загрузить страницу, содержащую эту директиву, JustGauge выдает ошибку о том, что он не может найти элемент с соответствующий id. Просто упомянем, что первый console.log работает хорошо, но второй console.log возвращает 0. Также я новичок в angularjs, и я не мог решить эту проблему!

Answer 1

Оберните JustGage() вызов в $timeout:

.directive("gauge", function ($compile, $timeout) { 
    ... 
    $timeout(function() { 
    var g = new JustGage({...}); 
    }); 

Это дает браузеру возможность оказывать дополнительный HTML, добавленный в функции компиляции. Затем плагин может найти недавно добавленный div.