如何從ng-repeat內部子指令

Question

中獲取項目，因此我試圖從ng-repeat中將變量獲取到ng-repeat中的指令中。我似乎無法弄清楚，我一直在看'@'和'='這兩個東西，但我認爲我沒有正確使用它們，誰能給我一個清楚的例子來說明如何實現這一點請，並且謝謝。

的index.html

<li ng-repeat="item in menu"> 
    <div backImg="{{item.img}}" class="homeimg"></div>       
</li> 

directive.js

app.directive('backImg', function(){ 
    return function(scope, element, attrs){ 
     var url = attrs.backImg; 
     scope: { 
      backImg:'=' 
     } 
     /* 
     element.css(
      //'background-image': 'url("/angular/my_first_project/v4/images/home_spiderman.jpg")' 
      'background-color','yellow', 
      "border", "1px solid orange" 
     ); 
     */ 

     element.css("background", "yellow"); 
    }; 
}); 

Answer 1

正如@Satpal提到的，你已經具有雙向數據綁定所定義的範圍，所以你需要不使用插值的屬性在HTML中。但是，您還沒有正確地聲明指令（實際上，它看起來像無效的JavaScript）。

app.directive('backImg', function(){ 
    return { 
     scope: { 
      backImg:'=' 
     }, 
     link: function(scope, element, attrs){ 
      var url = scope.backImg; 

      /* 
      element.css(
       //'background-image': 'url("/angular/my_first_project/v4/images/home_spiderman.jpg")' 
       'background-color','yellow', 
       "border", "1px solid orange" 
      ); 
      */ 

      element.css("background", "yellow"); 
     } 
    }; 
}); 

此外，您還需要在HTML使用屬性back-img的虛線版本：

<li ng-repeat="item in menu"> 
    <div back-img="item.img" class="homeimg"></div>       
</li>