Question

我写了自己的指令，这里有一些代码：

app.directive 'rateHighlight', ($timeout) ->
{
restrict: 'E'
template: require './view.html'
scope: {
  value: '=value'
},
transclude: true,
controller: [
  '$rootScope'
  '$scope'
  '$element'
  '$transclude'
  '$timeout'
  ($root, $scope, $element, $transclude, $timeout) ->
    $scope.chart = $element.find('.content')
    $scope.chart.append($transclude());
    $scope.$watch 'value', (newValue, oldValue) ->
      if newValue > oldValue
        $scope.chart.addClass('up')
        $timeout(() ->
          $scope.chart.removeClass('up')
        , 2500)
      if newValue < oldValue
        $scope.chart.addClass('down')
        $timeout(() ->
          $scope.chart.removeClass('down')
        , 2500)
]
}

View.html看起来非常简单：

<span class="rate badge content"></span>

我使用我的指令：

<rate-highlight value="rate.high"></exchange-rate-highlight>

rate object是来自parent指令（根作用域）的对象。它工作得很好，但是当我尝试在ng-repeat循环中使用它时，我遇到了问题。用两个词我有一个带有根范围的主要父指令。 Scope使用children指令共享其rate对象，我们得到这样的模式：

<parent>
  <innerCustomDirective ng-repeat="rate in charts">
    <oneMoreInnerDirective>
      <rateHighlight value="rate.high"></rateHighlight>
      <rateHighlight value="rate.low"></rateHighlight>
    </oneMoreInnerDirective>
  <innerCustomDirective/>
</parent>

它构建了所需的结构。但我只能看到屏幕上最后一个<rateHighlight>指令块。它使用rate（ng-repeat）第一步中的charts[0]对象。希望你能帮忙！抱歉我的英语不好。

解决！

抄袭有些奇怪。我将模板html更改为

<span class="rate badge content" ng-transclude></span>

并从控制器中删除此行：

$scope.chart.append($transclude());

现在一切正常。

ng-repeat和custom指令可以解决问题

0 个答案: