在angularjs中找不到指令创建的postlink中的元素

时间:2013-03-27 14:08:09

标签: javascript angularjs raphael graphael justgage

我正在尝试在AngularJS中为JustGauge创建一个指令。我的html视图是这样的:

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

我的指示是:<​​/ p>

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的新手,我无法解决这个问题!

1 个答案:

答案 0 :(得分:3)

将您的JustGage()电话换入$timeout

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

这使浏览器有机会呈现您在编译函数中添加的其他HTML。然后插件可以找到新添加的div