我正在尝试使用Angular和D3创建类别列表。我已经为此列表创建了一条指令，并且我模板中的某些子节点使用ng-repeat，因为我想用角度生成html而不是d3。
我的问题是，当尝试使用d3引用ng重复的元素时，尚未创建它们。如果我使用链接功能，则列表中没有任何项目。如果使用compile函数，则可以看到1个列表项，但至少应有2个。
取自小提琴：
angular.module('myApp').directive('targetingCategories', function(){
return {
restrict: 'E',
scope: {
data: '='
},
template: '<div>'+
'<ul class="catList">'+
'<li ng-repeat="cat in data.categories">'+
'{{cat.name}}'+
'<ul class="subCatList">'+
'<li ng-repeat="subcat in cat.categories">{{subcat.name}}</li>'+
'</ul>'+
'</li>'+
'</ul>'+
'</div>',
replace: true,
compile: function($tEl, $attrs){
// attach d3 on the TEMPLATE element, and look for list items
var vis = d3.select($tEl[0]);
var catList = vis.select('.catList');
var catListFirstItem = vis.select('.catlist>li');
var catListItems = vis.selectAll('.catList>li');
console.log(catList); // 1 item returned (the ul)
console.log(catListFirstItem); // 1 item returned (the first li)
console.log(catListItems); // 1 items returned ??
return function($scope, $el, $attrs){
// attach d3 to INSTANCE element and look for list items
var vis = d3.select($el[0]);
var catList = vis.select('.catList');
var catListFirstItem = vis.select('.catlist>li');
var catListItems = vis.selectAll('.catList>li');
console.log(catList); // 1 item returned (the ul)
console.log(catListFirstItem); // 1 item returned (the first li)
console.log(catListItems); // 0 items returned ??
};
}
};
});
这个想法是让我的标记有角度，然后对其进行d3动画处理。与使用CSS动画相比，我喜欢d3给我的控件。
当我使用d3创建我的列表项时，它工作得很好。我很想再做一次，但是我认为将LI放在模板中是一种更好的体系结构。
我在想我需要调用一个编译，或等待一个或某些东西。我几乎快要掌握Angular知识了，所以这里的任何教育都值得赞赏。
我要添加自己的潜在答案，但不要打扰，以防其他任何人有更好的选择。
就目前而言，似乎实现此目的的一种方法是用其他嵌套指令（特别是“ mainCategory”和“ subCat”）替换主模板中的LI。然后，我可以将d3附加到动画的适当实例元素上。通过包含索引属性属性，我可以控制使动画交错的延迟。感觉有点令人费解并且“骨干式”（为了对象而使用对象），但是它解决了我的问题。它还使我可以附加一些ng-click，而这与d3创建我的LI无关紧要/不可能。
是的，我知道我的属性称为“数据”，可能会有问题，但是现在我不必担心。我对服务/控制器/指令的使用进行的任何更正都值得赞赏：)
angular.module('myApp').directive('targetingCategories', function(){
return {
restrict: 'E',
scope: {
data: '='
},
template: '<div>'+
'<ul class="catList">'+
'<main-category ng-repeat="cat in data.categories" index="$index">'+
'{{cat.name}}'+
'<ul class="subCatList">'+
'<sub-cat ng-repeat="subcat in cat.categories" index="$index" data="subcat">{{subcat.name}}</sub-cat>'+
'</ul>'+
'</main-category>'+
'</ul>'+
'</div>',
replace: true
};
});
angular.module('myApp').directive('mainCategory', function(targetingService){
return {
restrict: "E",
scope: {
index: "=",
data: "="
},
template: '<li ng-transclude ng-click="selectCategory($event, data);"></li>',
replace: true,
transclude: true,
link: function($scope, $el, $attrs){
d3.selectAll($el).transition()
.duration(500)
.delay(function(){ return $scope.index*200; })
.ease('elastic')
.style('width', '100%')
.style('padding', '10px');
$scope.selectCategory = function($event, cat){
$event.stopPropagation();
targetingService.selectCategory(cat);
};
}
};
});
angular.module('myApp').directive('subCat', function(targetingService){
return {
restrict: "E",
scope: {
index: '=',
data: '='
},
template: '<li ng-transclude ng-click="selectSubCategory($event, data)"></li>',
replace: true,
transclude: true,
link: function($scope, $el, $attrs){
d3.selectAll($el).transition()
.duration(100)
.delay(function(d,i){ return 500+($scope.index*200); })
.ease('linear')
.style('height', '30px')
.style('padding', '8px');
$scope.selectSubCategory = function($event, subCat){
$event.stopPropagation();
targetingService.selectSubCategory(subCat);
};
}
};
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句