Я создал пользовательскую директиву Angular, которая использует D3.js для создания визуализации. Я ссылаюсь на эту директиву в своем HTML так:
<gm-link-analysis data="linkAnalysis.connections"></gm-link-analysis>
Соответствующая часть кода директивы выглядит так:
angular.module('gameApp')
.directive('gmLinkAnalysis', gmLinkAnalysis);
gmLinkAnalysis.$inject = ['$location', 'd3'];
function gmLinkAnalysis($location, d3) {
var directive = {
restrict: 'E',
templateUrl: '/app/gmDataVis/gmLinkAnalysis/gmLinkAnalysis.directive.html',
controller: 'LinkAnalysisController',
controllerAs: 'linkAnalysis',
scope: {
data: '='
},
link: function(scope) {
scope.$watch('data', function(json) {
console.log(json);
if (json) {
root = json;
root.fixed = true;
root.x = width / 2;
root.y = height / 2;
return scope.render(root);
}
});
...
}
};
return directive;
};
... и мой контроллер ниже:
angular.module('gameApp')
.controller('LinkAnalysisController', LinkAnalysisController);
LinkAnalysisController.$inject = ['$routeParams', 'dataVisService'];
function LinkAnalysisController($routeParams, dataVisService) {
var vm = this;
var userId = $routeParams.userId;
var getConnections = function() {
dataVisService.getConnections({
userId: userId
}).$promise.then(function(connections) {
vm.connections = connections;
console.log(vm.connections);
});
};
var init = function() {
getConnections();
};
init();
}
Похоже, что моя директива загружается до того, как мой контроллер загружает данные. Я продолжаю видеть undefined
(из моего журнала в директиве), за которым следует объект данных, который я ищу (из моего журнала в моем контроллере). Я понимаю, что директива будет загружаться до того, как мой асинхронный вызов API вернет данные в моем контроллере. То, что я не понимаю, - это то, почему $watch
не получает эти данные, когда он наконец загружен. Как я могу получить эти данные в моей директиве?
Проблема может заключаться в том, что ваши часы недостаточно "глубоки". Чтобы смотреть весь объект, а не просто переменную, вы можете передать третий аргумент true
функции $watch
:
link: function(scope) {
scope.$watch('data', function(json) {
...
}, true);
...
Если вам не нужно $watchCollection
можно использовать $watchCollection
.
Дополнительная информация здесь
watchCollection
может быть применено