1

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は正常に機能しますが、2番目のconsole.logは0を返します。また、angularjsを初めて使用するため、この問題を解決できませんでした。

4

1 に答える 1

3

JustGage（）呼び出しを$timeout：でラップします。

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

これにより、ブラウザはコンパイル機能で追加した追加のHTMLをレンダリングする機会が与えられます。次に、プラグインは新しく追加されたを見つけることができますdiv。

于 2013-03-27T17:17:19.500 に答える