Link 指令函数未被调用

Question

我有一个场景需要在弹出模式中显示饼图（使用 ui-bootstrap 模式）。我使用 c3.js 作为我的饼图 requirement（在一个指令中）。

饼图未在弹出窗口中加载。但令我惊讶的是，当我打开正在加载的控制台时尝试调试问题。当我重新调整 window 的大小时，它正在加载。

我该如何解决这个问题？

'use strict';
angular.module('App')
    .directive('pieChartDirective', function() {
        return {
            restrict: 'A',
            scope: {
                chartdata: '=',
            },
            link: function(scope, elem, attrs) {
                var chart = c3.generate({
                    bindto: '#chart',
                    data: {
                        columns: [
                            ['Javascript', scope.chartdata.Javascript],
                            ['HTML', scope.chartdata.HTML],
                            ['Css', scope.chartdata.Css],
                            ['Angular', scope.chartdata.Angular],
                            ['Bootstrap', scope.chartdata.Bootstrap],
                            ['Jquery', scope.chartdata.Jquery],
                            ['Communication', scope.chartdata.Communication]
                        ],
                        type: 'pie',
                    },
                    legend: {
                        show: false
                    },
                    tooltip: {
                        format: {
                            value: function(value, ratio, id, index) {
                                return value;
                            }
                        }
                    }
                });
            }
        };
    });

Html:

      <div pie-chart-directive chartdata="oChartData">
        <div id="chart"></div>
      </div>

Answer 1

您确定在 html 代码中正确包含您的指令吗

<div pie-chart-directive></div>

也许您必须将限制更改为 'E' 才能将您的指令用作标记元素

<pie-chart-directive chartdata="myData"></pie-chart-directive>

原因可能是，在您尝试生成图表时，您的 '#chart' div 尚未出现在 dom 树中。因此，您必须调整大小以触发新的绘制。尝试等到 dom 加载完毕

$('#chart').ready(function() {
       var chart = c3.generate({
                bindto: '#chart',
                data: {
                    columns: [
                        ['Javascript', scope.chartdata.Javascript],
                        ['HTML', scope.chartdata.HTML],
                        ['Css', scope.chartdata.Css],
                        ['Angular', scope.chartdata.Angular],
                        ['Bootstrap', scope.chartdata.Bootstrap],
                        ['Jquery', scope.chartdata.Jquery],
                        ['Communication', scope.chartdata.Communication]
                    ],
                    type: 'pie',
                },
                legend: {
                    show: false
                },
                tooltip: {
                    format: {
                        value: function(value, ratio, id, index) {
                            return value;
                        }
                    }
                }
            });
});

Answer 2

我给尺码得到的属性:

            link: function(scope, elem, attrs) {
            var chart = c3.generate({
                bindto: '#chart',
                size: {
                    width:400,
                    height:350
                },
                data: {
                    columns: [
                        ['Javascript', scope.chartdata.Javascript],
                        ['HTML', scope.chartdata.HTML],
                        ['Css', scope.chartdata.Css],
                        ['Angular', scope.chartdata.Angular],
                        ['Bootstrap', scope.chartdata.Bootstrap],
                        ['Jquery', scope.chartdata.Jquery],
                        ['Communication', scope.chartdata.Communication]
                    ],
                    type: 'pie',
                },
                legend: {
                    show: false
                },
                tooltip: {
                    format: {
                        value: function(value, ratio, id, index) {
                            return value;
                        }
                    }
                }
              });
            }

Link 指令函数未被调用

Link function of Directive is not being called

angularjs

angularjs-scope

angular-ui-bootstrap

c3.js