angularjs에서 지시문 생성의 게시 링크에있는 요소를 찾을 수 없습니다.

Question

AngularJS에 JustGauge에 대한 지시문을 만들려고합니다. 내 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을 반환합니다. 또한 anglejs를 처음 사용하기 때문에이 문제를 해결할 수 없습니다!

Answer 1

는 $timeout에 JustGage() 호출을 랩 :

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

이 브라우저에게 당신이 컴파일 기능에 추가 된 추가 HTML을 렌더링 할 수있는 기회를 제공합니다. 그러면 플러그인에서 새로 추가 된 div을 찾을 수 있습니다.