ng-repeat 中的自定义指令

Question

我有这个自定义指令。我在 ng-repeat.

中像下面这样调用我的指令

selectedMealCalc.calculated_foods as 'items', is an array of objects

 <!-- 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

在此 post 中作为此评论。我删除了 ng-init 因为 ng-init: "Only to initialize a property on the scope. I would recommend not to use it." 作为另一个答案 Does ng-init watch over change on instantiated property like ng-model does?

ng-repeat 中的自定义指令

Custom directive inside ng-repeat

javascript

angularjs

angularjs-directive