Question

如果这是一个初学者类型的问题，请饶我。我正在使用Angular.js播放Highcharts.js，但似乎指令范围没有绑定到值。以下是我的代码。

HTML - 但它正在这个表达式中{{xaxis}} {{seriesdata}}

<div class="container" ng-controller='chartController'>
        <div class="row">
            <div class="col-md-6">
                <line-chart xaxis='xaxis' seriesdata='seriesdata'></line-chart>
                {{xaxis}}
                {{seriesdata}}
            </div>
            <div class="col-md-6">
                <bar-chart options='pieOptions'></bar-chart>
            </div>
        </div>
    </div>

directive.js

(function() {
    'use strict';

    angular
        .module('chart')
        .directive('lineChart', lineChartDirective);

    /* @ngInject */
    function lineChartDirective() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div></div>',
            scope: {
                xaxis: '=xaxis',
                seriesdata: '=seriesdata'
            },
            link: function(scope, element) {
                Highcharts.chart(element[0], {
                    chart: {
                        type: 'spline',
                        zoomType: 'x'
                    },
                    plotOptions: {
                        line: {
                            dataLabels: {
                                enabled: true
                            }
                        }
                    },
                    title: {
                        text: 'Profit Ratio by Month'
                    },
                    xAxis: {
                        categories: scope.xaxis
                    },
                    yAxis: {
                        title: {
                            text: 'Profit %'
                        }
                    },
                    series: [
                        {
                            name: 'Total',
                            data: scope.seriesdata
                        }
                    ]
                });
            }
        }
    }
})();

service.js

(function() {
    'use strict';

    angular
        .module('chart')
        .factory('chartData', chartDataFactory);

    chartDataFactory.$inject = ['$http'];

    /* @ngInject */
    function chartDataFactory($http) {
        function getData() {
            return $http.get('../../data/sampleData.json').then(function(result) {
                return result.data;
            })
        }

        return {
            getData: getData
        }
    }
})();

controller.js

(function() {
    'use strict';

    angular
        .module('chart')
        .controller('chartController', chartController);

    chartController.$inject = ['$scope', 'chartData', 'lodash'];

    /* @ngInject */
    function chartController($scope, chartData, lodash) {
        var vm = this;
        chartData.getData().then(function(data) {
            $scope.chartData = data;
            $scope.xaxis = data.SEO[0]["SEO-MOD-001"]["SEO-END-001"];
            $scope.seriesdata = data.SEO[0]["SEO-MOD-001"]["SEO-END-002"];
            console.log($scope.xaxis);
            console.log($scope.seriesdata);
        });

        $scope.pieOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Projects'
            },
            xAxis: {
                categories: ['Noreil', 'Ken', 'Alfie', 'Francis']
            },
            yAxis: {
                title: {
                    text: 'Completed Projects'
                }
            },
            series: [
                {
                    name: 'Quarter 1',
                    data: [23, 11, 34, 26]
                },
                {
                    name: 'Quarter 2',
                    data: [14, 20, 26, 30]
                }
            ]
        }
    }
})();

Answer 1

当执行指令链接功能时，您还没有数据。所以请尝试按照链接功能进行操作：

var unwatch = scope.$watch('[xaxis, seriesdata]', function (results) {
    if (results[0] && results[1]) {
        init();
        unwatch();
    }
}, true);

function init() {
    // Highcharts.chart(element[0], { ...
}

Angularjs指令范围似乎没有绑定到值

1 个答案: