Загрузка графика через Angular ngRoute не работает

Question

Загрузка графика через Angular ngRoute не работает

0

Я пытаюсь загрузить диаграмму (библиотека высоких карт) через angular ngRoute, но я не могу отобразить диаграмму.

JS - это моя конфигурация

    var app = angular.module('myApp', [
     'ngRoute'
     ]);

      app.config(function($routeProvider) {
      $routeProvider
      .when('/', {
       templateUrl: 'some.html',
       controller: 'MainCtrl'
       })
       .when('/contacts/:_id', {
       templateUrl: 'contacts/some.html',
       controller: 'SecondCtrl'
       })
       .otherwise({
        redirectTo: '/'
       });


      });

JS - это мои контроллеры

app.controller('MainCtrl', ['$scope', function($scope) {
// some code here
}]);

app.controller('SecondCtrl', ['$scope', function($scope) {
//some code here
// drawing chart function
$(function () {
        $('#container').highcharts({
            //rest of the code
}]);

HTML//contacts/some.html страница

Нет ошибок в консоли, хотя диаграмма не загружается

Загрузка на главной странице - index.html только если написать

<div ng-controller="SecondCtrl">
    <div id="container"></div>
</div>

Ievgen Chernetsov 26 авг. 2015, в 18:02

Источник

0

Вы уверены, что ваш div пуст? Может быть, это заселено, но есть некоторые проблемы css? Проверьте Chrome Dev Tool
Medet Tleukabiluly 26 авг. 2015, в 15:55
0

Да пусто я думаю что проблема в маршрутизации
Ievgen Chernetsov 26 авг. 2015, в 19:10
0

Это были проблемы css :) спасибо. Диаграмма отображается только за начальной загрузкой div, теперь изучаем, как это исправить. большое спасибо
Ievgen Chernetsov 27 авг. 2015, в 06:36
0

Кстати, избегайте использования $(function () { $('#container').highcharts({ }) }); это - старый, не элегантный, грязный, плохой, не угловой, спагетти код
Medet Tleukabiluly 27 авг. 2015, в 06:50

Показать ещё 2 комментария

Теги:

javascript

jquery

angularjs

highcharts

1 ответ

Ещё вопросы

Вы уверены, что ваш div пуст? Может быть, это заселено, но есть некоторые проблемы css? Проверьте Chrome Dev Tool
Да пусто я думаю что проблема в маршрутизации
Это были проблемы css :) спасибо. Диаграмма отображается только за начальной загрузкой div, теперь изучаем, как это исправить. большое спасибо
Кстати, избегайте использования $(function () { $('#container').highcharts({ }) }); это - старый, не элегантный, грязный, плохой, не угловой, спагетти код

Naveen · Accepted Answer · 2015-08-26T13-31-00.000Z

Вы можете попытаться создать директиву "диаграмма" и использовать $ element в функции ссылки, чтобы инициировать объект Highchart. Что-то, как показано ниже:

app.directive("chart", function () {
return {
    template: '<div id="chartContainer" style="height: 500px; min-width: 310px; max-width: 1024px; margin: 0 auto"></div>',
    restrict: 'E',
    scope: {
        data: "=" // two way binding
    },
    replace: true,
    controller: 'CustomCtrl',
    link: function ($scope, element, $attrs) {

            var mapChart = $(element).highcharts('Area', {
                chart: {
                    renderTo: $(element).attr('id')
                },series: [
                {
                    name: 'Countries',
                    mapData: mapData,
                    color: '#E0E0E0',
                    enableMouseTracking: false
                },/* so on */

И на вашей странице html добавить строку ниже

    <div class="container" ng-controller="CustomCtrlas customCtrl">
       <chart class="container" data='customCtrl.chartData'>
    </div>

Позвольте мне знать, если это помогает

Спасибо, это работает, хотя основная причина была в css :). Диаграмма не отображается в div начальной загрузки, только позади них, исследуя, как это исправить.