Angularjs 如何向ng repeat元素添加样式或属性_Angularjs

Angularjs 如何向ng repeat元素添加样式或属性

angularjs

Angularjs 如何向ng repeat元素添加样式或属性,angularjs,Angularjs,全部：关于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:

全部：

关于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>

My template chart.html：

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


{{m}}

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

谢谢

现在还不完全清楚您想在这里完成什么，但是您希望在链接函数中执行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");
        }
    };
});

这里有一个

我认为您已经做对了，缺少的只是为每个ng重复项添加另一个指令，该项将使用

过滤器

指令控制器功能执行d3操作。代码不起作用的原因是，在计算

assets/chart.html

模板的

ng repeat

指令之前，会触发

filter

指令的链接函数，因此d3选择不会捕获任何内容。此外，下面的解决方案通过隔离

filter

指令的作用域并接受

names

scope变量，提高了该指令的可重用性

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

chart.html


{{m}}

你能提供一个JSFIDLE吗？你在这里的想法是错误的，不要使用你的控制器来修改DOM。这就是链接函数的作用。@Dan Nolan谢谢你的帮助。你能告诉我如何修改这个吗？因为即使我把所有的操作都放在Link中，ng repeat中的元素到那时还没有生成。谢谢你的帮助。但是我想做的是操作由ng repeat生成的那些元素，而不是在它们的父元素上设置样式。让我们考虑控制器。在ng生成的每个元素上执行更复杂的DOM操作（如添加更多元素或附加事件处理程序）时，请重复。这里的关键问题是如何访问这些重复元素？或者我怎么知道这些元素是什么时候生成的呢？啊，我明白了，所以我把你的

selectAll（）

添加到了后面，并更新了示例。将d3与角度变量一起使用的一个好方法是

scope.$watch

查看角度变量，然后告诉d3根据更改进行渲染。然后，您将构建D3组件，以便根据这些变量进行渲染，它将相应地进行调整。下面是一个示例，演示如何查看作用域上的名称数组，然后在其更改时使用D3：谢谢帮助。我不知道为什么它对你有用。我想我做了与您类似的事情，但我无法使用selectAll（“.sm”）获得任何元素选择。顺便说一句，我无法打开该链接，。你能修好吗？谢谢，我特别建议你阅读。另外，也请阅读。

filterItem

只是一个需要父指令（

filter

）的指令，该指令附加在

chart.html中的每个ng repeat
ed项上，感谢您的帮助。但是，您能否再谈一谈为什么使用filterItem可以使它在评估模板后发生？这是因为每个ng repeat
ed项都是**编译的**
，具有新的作用域，因此在ng repeat中添加的任何指令都会对每个项进行评估。
<filter names="names"></filter>

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