Javascript 指令中的数据未在ng repeat中显示

Javascript 指令中的数据未在ng repeat中显示,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我把这个问题分解成最简单的形式。基本上我有一个指令,对于演示,它还没有真正做任何事情。我有一个属性为指令的div。div中来自对象数组的值不显示。如果我从div中删除该指令,它们将显示为OK。我显然错过了一些非常明显的东西,因为我以前做过,没有任何问题 下面是一个例子: 脚本: app.controller('MainCtrl', function($scope) { $scope.tooltips = [{"id":1,"warn":true},{"id":2,"warn":false}

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

下面是一个例子:

脚本:

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元素:{tip.id}


只是为了证明它在没有指令的情况下有效: div元素:{tip.id}
正如拜尔斯在上面和下面的评论所述,问题所涉及的行为在至少1.2.5中不再存在

更加清晰;这与ng repeat无关,您可以将其删除,但仍然不会有
提示
(或
工具提示

请参阅关于
=
和其他配置的含义及其对您的作用的问题

基本上,在您使用
=
的情况下,指令的作用域将在基础元素中使用,您不再拥有控制器的作用域。这对您意味着没有
{{tip.id}
,甚至没有
tip
。因为指令没有提供

下面是一个演示如何使用它的示例

基本上我所做的就是

app.directive("cmTooltip", function () {
    return {
        scope: {
            cmTooltip: "="
        },
        link: function($scope){    // <<
          $scope.tip = { id: 1 };  // <<
        }                          // <<
    };
});
app.directive(“cmTooltip”,函数(){
返回{
范围:{
cmTooltip:“=”
},

link:function($scope){/在我看来,这不是一个好办法。 我会使用对象

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元素:{tip.toString()}
有一种方法,通过使用
转换
,使其在angular的早期版本中工作,如下所示:

app.directive("cmTooltip", function () {
    return {
        scope: {
           cmTooltip: "="
        },
        transclude:  true,
        template : '<div ng-transclude></div>'
    };
});
app.directive(“cmTooltip”,函数(){
返回{
范围:{
cmTooltip:“=”
},
是的,
模板:“”
};
});

只需将angular版本更改为最新版本(1.2.5)即可使您的plunk正常工作:我很乐意这样做,但我有8000行代码需要更新-不太热衷!请参阅我的上述评论,只需将原始plunk更改为最新版本(1.2.5)angular版本可以让它工作。所以我怀疑在最新版本中有一些关于多个指令和隔离作用域的错误修复。谢谢,我想我也尝试过通过更改
data require=“angular”来修复。js@1.0.x"
我想我已经检查过了,从1.0到1.2有很多突破性的变化,所以我要补充一下。感谢Philipp,这确实帮助了我对隔离作用域的理解。OP知道如何通过删除他的指令来实现这一点,问题是他应用指令时为什么它不起作用。这不是question是关于,你基本上甚至把视图逻辑放进了JS.wtf?我同意-谢谢你的回答,但这与我的问题无关。太棒了,这正是我需要的!
<div ng-repeat="tip in tooltips" class="titlecell">
        A div element: {{ tip.toString() }}
    </div>
app.directive("cmTooltip", function () {
    return {
        scope: {
           cmTooltip: "="
        },
        transclude:  true,
        template : '<div ng-transclude></div>'
    };
});