Question

我已经按照示例代码嵌入了angular.js指令中的flot图表：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, {});
        }
    };
});

请注意，尽管要点中的代码似乎有效，但布局严重受损。文字（在小提琴中看）是错误的。如果使用text to canvas插件，你将看不到任何例子。这应该修复它，如这个小提琴所示： http://jsfiddle.net/TDwGF/219/

angular.js指令中的flot图表具有零维度

2 个答案: