[英]Custom directive inside ng-repeat
I have this custom directive. 我有这个自定义指令。 I call my directive like bellow, inside a
ng-repeat
. 我在
ng-repeat
内像波纹管一样调用我的指令。
selectedMealCalc.calculated_foods as 'items', is an array of objects
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 -->
Then I created this directive in angularjs. 然后,我在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. 还有这个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>
When I update the selectedMealCalc.calculated_foods
the custom directive is not updating. 当我更新
selectedMealCalc.calculated_foods
,自定义指令未更新。 I have to close the modal and open again in my page to saw the new line. 我必须关闭模式并在页面中再次打开才能看到新行。
As this comment Custom directive inside ng-repeat in this post. 正如本文中ng-repeat中的Custom指令一样 。 I removed the
ng-init
because ng-init: "Only to initialize a property on the scope. I would recommend not to use it." 我删除了
ng-init
因为ng-init:“仅在作用域上初始化属性。建议不要使用它。” as this another answer Does ng-init watch over change on instantiated property like ng-model does? 就像这另一个答案一样, ng-init是否像ng-model一样监视实例化属性的变化?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.