angularjs - angular.js 指令中的浮点图表的维度为零

Question

我遵循了在 angular.js 指令中嵌入浮点图的示例代码：https ://gist.github.com/jrmoran/3966529

问题是外部chart元素最终的宽度和高度为零。这是我的测试代码：http: //jsfiddle.net/pVEDL/。因此，我遇到了布局问题。

此外，除非我在调用$.plot它之前隐藏容器元素，否则 flot 会抛出一个异常，指出图表的维度为零。为什么我必须隐藏容器元素？

Answer 1

我最终有了

template: '<div></div>',
replace: true,

在我的指令定义中，这有帮助。

Answer 2

这让我很头疼。解决方案是让指令绑定到“A”（属性）而不是“E”（元素）。似乎有一些与创建自定义元素有关的东西，它与大小/样式有角度混淆。

因此，将指令中的限制更改为“A”并更改<chart>为<div chart="">，一切都应该正常工作。

HTML：

<div ng-app='App'>
    <div ng-controller='Ctrl'>
        <div class="chart" chart="" ng-model='data'>        
        </div>
    </div>
</div>

指示：

App.directive('chart', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {});
        }
    };
});

请注意，即使 gist 中的代码似乎可以正常工作，但布局已严重损坏。文本（看小提琴）放错了位置。例如，如果使用 text to canvas 插件，您将看不到任何东西。这应该修复它，如这个小提琴所示：http: //jsfiddle.net/TDwGF/219/