AngularJS：ngRepeat内のカスタムディレクティブの使用

Question

私はカスタムディレクティブを持っていますが、ngRepeat内で使用する際に問題があります。たとえば、以下の私のtacoの例では、ng-repeat属性にtacoというエイリアスが付けられているオブジェクトは、ディレクティブの定義内からアクセスできないようです。

app.tpl.html

<div ng-repeat="taco in tacoController.tacos"> 
    <taco></taco> 
<div> 

taco.directive.js

(function() { 
    angular 
     .module('food') 
     .directive('taco', [ 
      // DI: strings here 
      function(
       // DI: params here 
      ) { 
       return { 
        restrict: 'E', 
        template: ` 
         // THIS WORKS 
         <div>{{ tacoController.lastShipment }}</div> 
         // THIS DOES NOT! 
         <div>{{ taco.shellType }}</div> 
        ` 
       }; 
      } 
     ]) 
})(); 

P.S.可能であれば私のディレクティブで分離スコープを使用しないようにしたいと思います。

Answer 1

tacoControllerにアクセスできるのは、メインページのスコープ内に存在し、カスタムディレクティブに分離スコープがないためです。
tacong-repeatの項目は、メインページのスコープ内に存在しないため、カスタムディレクティブではアクセスできません。

あなたは（あなたがすでにあることを知っているかもしれません）、次のよう指令の孤立範囲で tacoアイテムを渡すことができ

：

(function() { 
    angular 
     .module('food') 
     .directive('taco', [ 
      // DI: strings here 
      function(
       // DI: params here 
      ) { 
       return { 
        restrict: 'E', 
        scope: { 
         tacoItem: '=', 
         lastShipment: '=' 
        }, 
        template: ` 
         // THIS WORKS 
         <div>{{ lastShipment }}</div> 
         // THIS DOES NOT! 
         <div>{{ tacoItem.shellType }}</div> 
        ` 
       }; 
      } 
     ]) 
})(); 

その後、HTMLは次のようになります。

<div ng-repeat="taco in tacoController.tacos"> 
    <taco taco-item="taco" last-shipment="tacoController.lastShipment"></taco> 
<div>