Как отобразить директиву только после загрузки данных из tsv в angular js

Я хочу интегрировать d3.js и angularjs. Мне нужно нарисовать граф Линга. Данные загружаются из файла tsv. У меня проблема с отображением графика, и ошибка заключается в том, что данные еще не загружены, а график отображается. Я хочу, чтобы, когда данные загружаются в переменную области видимости, график не отображался иначе. Пожалуйста помоги. Вот код контроллера

phonecatControllers.controller('MainCtrl', ['$scope',
     function($scope) {
       d3.tsv("sample.tsv", function(error, data) {
       $scope.d3Data = data;
 });
}]);

А вот и код директивы

directives.directive('d3Bar', [ function() {
return {
    restrict : 'E',
    scope : {
        data : '='
    },
    link : function(scope, element) {
        scope.$watch('data', function(newData, oldData) {
            drawLine(newData);
        }, true);
    }
}

}

и html есть

<body ng-controller='MainCtrl'>
    <d3-bar data='d3Data'></d3-bar>

</body>

javascript angularjs d3.js tsv
person hard coder    schedule 04.07.2014    source источник

Ответы (2)


arrow_upward
6
arrow_downward

поместите элемент управления if в свои часы, чтобы проверить, готов ли ваш элемент данных к работе или нет

directives.directive('d3Bar', [function() {
    return {
        restrict : 'E',
        scope : {
            data : '='
        },
        link : function(scope, element) {
            scope.$watch('data', function(newData, oldData) {
                if(newData){
                    drawLine(newData);
                }
            }, true);
        }
    }
}])
person Poyraz Yilmaz    schedule 04.07.2014
comment
теперь строка $scope.d3Data = data; контроллера не вызывает никаких событий для функции наблюдателя. Изначально функция наблюдателя запускается с параметрами oldData и newData как неопределенными. - person hard coder; 04.07.2014
comment
@sarvesh, тогда ваш объект d3Data никогда не изменяется... Пожалуйста, убедитесь, что ваш d3Data имеет правильное значение... - person Poyraz Yilmaz; 04.07.2014
comment
@ wickY26- Я правильно отладил код. Управление сначала переходит к функции наблюдения со старыми и новыми данными как неопределенными, а затем переходит к строке $scope.d3Data = data контроллера, в которой я вижу, что переменная данных имеет массив значений после того, как эта функция наблюдения за строкой не не получить пробег, как ожидалось - person hard coder; 07.07.2014

arrow_upward
9
arrow_downward

Используйте ng-if с вашим условием, что данные доступны или нет, чтобы решить эту проблему.

HTML:

<body ng-controller='MainCtrl'>
  <div ng-if="d3Data">
    <d3-bar data='d3Data'></d3-bar>
  <div>
</body>

Таким образом, ваша директива будет загружаться только тогда, когда d3Data будет иметь какие-либо данные.

person Rubi saini    schedule 11.06.2015
comment
Это не удастся, если у вас есть пустая ссылка на объект для данных, см. stackoverflow.com/questions/32586180/ - person Jimmy Kane; 30.04.2017