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

正如本文中ng-repeat中的Custom指令一樣 。 我刪除了ng-init因為ng-init：“僅在作用域上初始化屬性。建議不要使用它。” 就像這另一個答案一樣， ng-init是否像ng-model一樣監視實例化屬性的變化？