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运行良好，但第二个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 回答