Custom directive inside ng-repeat

Question

I have this custom directive. I call my directive like bellow, inside a 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 -->

Then I created this directive in 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;
          };
        }]
      };
    }]);

And this HTML directive.

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

When I update the selectedMealCalc.calculated_foods the custom directive is not updating. I have to close the modal and open again in my page to saw the new line.

yea. I think your problem is ng-init https://stackoverflow.com/questions/25574048/does-ng-init-watch-over-change-on-instantiated-property-like-ng-model-does try using a watch or move the ng-init logic to your controller — Charlie Ng, Nov 13 '17 at 21:52
Hi @CharlieNg your answer is correct. Solved my problem. I did know this behavior of ng-init. Thank You. — Danilo Cândido, Nov 13 '17 at 23:49

score 0 · Accepted Answer · answered Dec 13 '17 at 01:21

As this comment Custom directive inside ng-repeat in this post. I removed the ng-init because ng-init: "Only to initialize a property on the scope. I would recommend not to use it." as this another answer Does ng-init watch over change on instantiated property like ng-model does?

Custom directive inside ng-repeat

1 Answers1