Angularjs 未调用指令的链接函数

我有一个场景，需要在弹出模式（使用ui引导模式）中显示饼图。我使用了

c3.js

作为饼图需求（在指令中）

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

如何解决此问题

'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:

---

您是舒尔吗，您是否将指令正确地包含在html代码中

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

原因可能是，在您尝试生成图表时，您的

“#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;
                        }
                    }
                }
            });
});

---

您是舒尔吗？您是否将指令正确地包含在html代码中

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

原因可能是，在您尝试生成图表时，您的

“#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;
                        }
                    }
                }
            });
});

---

我通过给出size属性得到它：

            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;
                        }
                    }
                }
              });
            }

---

我通过给出size属性得到它：

            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;
                        }
                    }
                }
              });
            }

---

return fnLink

将返回函数，但不会执行它。改为编译：fnLink。

return fnLink

将返回函数，但不会执行它。改为编译：fnLink。主要问题是饼图没有加载，但是我得到了弹出模式，当我重新调整窗口大小时，我也得到了饼图。因此，我正在寻找支持我的指令（加载饼图时不需要重新调整窗口大小）的代码。主要问题是饼图没有加载，而是得到弹出模式，当我重新调整窗口大小时，也得到饼图。因此，我正在寻找支持我的指令的代码（加载饼图时不需要重新调整窗口大小）