在angularjs中的指令創建後鏈接中找不到元素

我正嘗試在AngularJS中爲JustGauge創建一個指令。我的HTML視圖是這樣的：在angularjs中的指令創建後鏈接中找不到元素

 <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的新手，我無法解決這個問題！

來源

2013-03-27 alisabzevari

你在Angular之前包括jQuery嗎？ – 2013-03-27 15:14:14

@MarkRajcok是的，我認爲它必須拋出一個錯誤，如果它與JQuery有關。順便說一句，Justgauge不需要jQuery。 – alisabzevari 2013-03-27 16:55:26

裹在$timeout您JustGage（）調用：

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

這使得瀏覽器有機會呈現在你的編譯功能添加額外的HTML。然後插件可以找到新添加的div。

來源

2013-03-27 17:17:19

謝謝！它非常完美！ – alisabzevari 2013-03-27 17:56:52

在angularjs中的指令創建後鏈接中找不到元素

回答

相關問題