ng-repeat内のカスタムディレクティブ

Question

私はこのカスタムディレクティブを持っています。 ng-repeatの中に、私の指示を以下のように呼んでいます。 'アイテム' として

selectedMealCalc.calculated_foods、オブジェクトの配列

<!-- DIRECTIVE --> 
    <div ng-repeat="option in [0,1,2,3,4]"> 
     <meal-option option="{{option}}" 
        items="selectedMealCalc.calculated_foods" 
        selectedmealcalc="selectedMealCalc"></meal-option> </div> 
    <!-- DIRECTIVE --> 

は、その後、私はangularjsでこのディレクティブを作成しています。

'use strict'; 

    angular.module('nutriApp').directive('mealOption', ['$compile', function($compile) { 
     return { 
     restrict: 'E', 
     templateUrl: 'views/checkins/meal-options.html', 
     scope: { 
      option: "@", 
      items: "=", 
      selectedmealcalc: "=" 
     }, 
     controller: ['$scope', 'Food', function($scope, Food) { 
      $scope.sumFood = {}; 
      $scope.summerizeOption = function(foods) { 
      if(foods.length > 0){ 
       $scope.sumFood = Food.summerize(foods); 
      } 
      return $scope.sumFood; 
      }; 
     }] 
     }; 
    }]); 

このHTMLディレクティブ。

<div class="row" ng-init="filteredItems = (items | filter: { food_option: option })" ng-controller="CheckinsPlansCtrl"> 
    <div class="col-md-12" ng-show="filteredItems.length > 0"> 
    Opção {{ option }} 
    <table class="table table-calculo table-striped"> 
     <thead> 
     <tr> 
      <th>Alimento</th> 
      <th>Quantidade</th> 
      <th></th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="foodCalculation in filteredItems track by $index"> 
      <td>{{foodCalculation.food.name}}</td> 
      <td>{{foodCalculation.gram_amount}} g</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

selectedMealCalc.calculated_foodsを更新すると、カスタムディレクティブは更新されません。 改行を見て私のページでもう一度モーダルを閉じて開いてください。

Answer 1

このコメントCustom directive inside ng-repeatこの投稿にあります。 ng-initを削除しました。なぜなら、ng-initは：「スコープ上のプロパティを初期化するだけです。使用しないことをお勧めします。この別の回答としてDoes ng-init watch over change on instantiated property like ng-model does?