指令的链接功能未被调用答案

【问题标题】：Link function of Directive is not being called指令的链接功能未被调用
【发布时间】：2016-04-26 14:55:27
【问题描述】：

我有一个场景，我需要在弹出模式（使用 ui-bootstrap 模式）中显示饼图。我使用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：

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

【问题讨论】：

return fnLink 将返回该函数但不会执行它。请改用compile: fnLink。

标签： angularjs angularjs-scope angular-ui-bootstrap c3.js

【解决方案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;
                        }
                    }
                }
            });
});

【讨论】：

主要问题是饼图没有加载，但我得到了弹出模式，当我重新调整窗口大小时，我也得到了饼图。所以我正在寻找支持我的指令的代码（加载饼图而不需要重新调整窗口大小）

【解决方案2】：

我通过提供 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;
                        }
                    }
                }
              });
            }

【讨论】：