我正在尝试在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的新手,我无法解决这个问题!
答案 0 :(得分:3)
将您的JustGage()电话换入$timeout
:
.directive("gauge", function ($compile, $timeout) {
...
$timeout(function() {
var g = new JustGage({...});
});
这使浏览器有机会呈现您在编译函数中添加的其他HTML。然后插件可以找到新添加的div
。