指令中的数据未在ng重复中显示

Data from directive not displaying within ng-repeat

本文关键字：显示 ng 数据 指令      更新时间：2023-09-26

我已经将这个问题分解为最简单的形式。基本上，我有一个指令，对于演示来说，它还没有真正做任何事情。我有一个div，该指令是一个属性。div中来自对象数组的值不会显示。如果我从div中删除指令，它们就会显示为OK。我显然在这里缺少了一些非常明显的东西，因为我以前做过，没有遇到任何问题。

这是Plunk：http://plnkr.co/edit/ZUXD4qW5hXvB7y9RG6sB?p=preview

脚本：

app.controller('MainCtrl', function($scope) {
  $scope.tooltips = [{"id":1,"warn":true},{"id":2,"warn":false},{"id":3,"warn":true},{"id":4,"warn":true}];
});
app.directive("cmTooltip", function () {
    return {
        scope: {
            cmTooltip: "="
        }
    };
});

HTML

<div ng-repeat="tip in tooltips" class="titlecell" cm-tooltip="true">
    A div element: {{ tip.id }}
</div>
<br><br>
Just to prove it works without the directive:
<div ng-repeat="tip in tooltips" class="titlecell">
    A div element: {{ tip.id }}
</div>

有一个破解，通过使用transclusion使其在早期版本的angular中工作，如下所示：

app.directive("cmTooltip", function () {
    return {
        scope: {
           cmTooltip: "="
        },
        transclude:  true,
        template : '<div ng-transclude></div>'
    };
});

PLNKR

根据Beyers在上面和下面的评论，问题所涉及的行为在至少1.2.5中不再存在

更清楚地说；这与无关，您可以删除它，但仍然不会有tip（或tooltips）。

请参阅以下问题，了解=和其他配置的含义以及它对您的作用。

基本上，对于您的情况，当您使用=时，指令的作用域将在底层元素中使用，您不再拥有控制器的作用域。这对你来说意味着没有{{ tip.id }}，甚至没有tip。因为指令没有提供。

这里有一个演示你可以用它做什么的plunker。

基本上我所做的就是

app.directive("cmTooltip", function () {
    return {
        scope: {
            cmTooltip: "="
        },
        link: function($scope){    // <<
          $scope.tip = { id: 1 };  // <<
        }                          // <<
    };
});

这在作用域上创建了tip对象，因此它有一个id。

对于你的情况，你可能只是不使用=，并根据你想要的内容来考虑这个问题以获得其他选择。

在我看来，这不是一条路。我会使用对象。

JS代码：

  function tooltip(id,warn){
    this.id = id;
    this.warn = warn;
  }
  tooltip.prototype.toString = function toolToString(){
    return "I'm a tooltip, my id = "+this.id+" and my warn value = "+this.warn;
  }
  $scope.tooltips = [new tooltip(1,true),new tooltip(2,false),new tooltip(3,true),new tooltip(4,true)];

HTML:

<div ng-repeat="tip in tooltips" class="titlecell">
        A div element: {{ tip.toString() }}
    </div>
相关文章：