如何添加样式或ATTR到NG-重复元素 [英] How to add style or attr to ng-repeat element
问题描述
所有
关于纳克重复一个问题：
One question about ng-repeat:
var app = angular.module("vp", []);
app.controller("main", function($scope) {
$scope.names = ["name1", "name2","name3","name4","name5"];
});
app.directive("filter", function(){
return {
restrict: "AE",
templateUrl: "asset/chart.html",
controller: function($scope){
this.setLayout = function(EL){
var d3EL = d3.select(EL[0]);
//here below could be style attr or any DOM operation
d3EL.selectAll(".sm").style("font-size","30px");
}
},
link: function(scope, EL, attrs, controller){
controller.setLayout(EL);
}
};
});
我的HTML是：
My html is:
<html ng-app="vp">
<!-- here is the head part that I did not write-->
<body ng-controller="main" class="container">
<filter></filter>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
</body>
</html>
我的模板chart.html：
My template chart.html:
<div id="cnt">
<div ng-repeat="m in names">
<div class="sm">{{m}}</div>
</div>
</div>
当我运行setLayout的功能，我发现还没有产生的元素，我不知道如何处理这一点，如果我想设置样式里面的元素NG-重复？
When I run the setLayout function, I found those elements have not been generated, I wonder how to handle this if I want to set style to those element inside ng-repeat?
感谢
推荐答案
我觉得你这样做是正确的已经，什么缺少的仅仅是添加每个NG-重复项目的另一个指令，将使用过滤指令控制器的功能来执行其D3操纵。你为什么code不工作的原因是因为过滤指令的链接功能是之前触发NG-重复你的资产/ chart.html的指令模板进行评估，因此，您的选择D3没有捕获任何东西。此外，我的解决方案，下面通过分离其范围和接受名称范围变量促进了过滤指令的可重用性
I think you're doing it right already, whats missing is just to add another directive for each ng-repeated item that will be using the filter directive controller functions to perform its d3 manipulation. The reason why you're code doesn't work is because the filter directive's link function is triggered before the ng-repeat directive of your assets/chart.html template is evaluated, hence your d3 selection does not catch anything. Furthermore, I the solution below promotes re-usability of the filter directive by isolating its scope and accepting the names scope variable.
DEMO
的JavaScript
.directive('filter', function() {
return {
restrict: 'EA',
scope: { names: '=' },
templateUrl: 'chart.html',
controller: function() {
this.setLayout = function(element) {
var d3el = d3.select(element[0]);
d3el.select(".sm").style("font-size","30px");
};
}
}
})
.directive('filterItem', function() {
return {
require: '^filter',
link: function(scope, elem, attr, filter) {
filter.setLayout(elem);
}
};
});
HTML
的 index.html的的
<filter names="names"></filter>
的 chart.html 的
<div id="cnt">
<div ng-repeat="m in names" filter-item>
<div class="sm">{{m}}</div>
</div>
</div>
这篇关于如何添加样式或ATTR到NG-重复元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
