Question

所有

有关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是：

<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：

<div id="cnt">
    <div ng-repeat="m in names">
        <div class="sm">{{m}}</div>
    </div>
</div>

当我运行setLayout函数时，我发现这些元素尚未生成，我想知道如果我想将样式设置为ng-repeat中的那些元素，该如何处理？

由于

Answer 1

目前还不完全清楚你想要在这里完成什么，但你想在你的链接函数中进行DOM操作（或d3可视化），而不是试图在控制器中调用它们。当难以维护时，你应该将它们拉出一个单独的JavaScript文件并注入它们。

您的过滤器指令可能如下所示：

app.directive("filter", function(){
    return {
        restrict: "AE",
        templateUrl: "chart.html",
        link:  function(scope, EL, attrs){
            d3.select(EL[0])
              .selectAll(".sm")
              .style("font-size","30px");
        }
    };
});

这是plnkr example

Answer 2

我认为你已经正确地做了，丢失的只是为每个重复项目添加另一个指令，该指令将使用filter指令控制器函数来执行其d3操作。您的代码无法正常工作的原因是因为在评估filter模板的ng-repeat指令之前触发了assets/chart.html指令的链接功能因此你的d3选择没有捕获任何东西。此外，我在下面的解决方案通过隔离其范围并接受filter范围变量来促进names指令的可重用性。

<强> 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-repeat元素

2 个答案: