사용자 지정 지시문에서 함수를 호출 할 수 없습니다. 범위 내가

Question

가 내 html로 '계산-TD-plan.html'

<tr ng-repeat="foodCalculation in selectedMealCalc.calculated_foods"> 
      <td>{{foodCalculation.food.name}}</td> 
      <td>{{foodCalculation.gram_amount}} g</td> 
      <td>{{foodCalculation.kcal}} kcal</td> 
      <td>{{foodCalculation.proteina}} g</td> 
      <td>{{foodCalculation.cho}} g</td> 
      <td>{{foodCalculation.lipideos}} g</td> 
      <td class="text-center"> 
      <button class="btn btn--principal btn--xs" ng-click="edtiFoodCalc(selectedmealcalc, foodCalculation, $index)">Editar</button> 
      <button class="btn btn--principal btn--xs" ng-click="removeFoodCalc(selectedmealcalc, foodCalculation)">Remover</button> 
      </td> 
     </tr> 

그럼 내가 위에서 같은 지침을 만들 안에 이것을 가지고 사용 사용하고자하는 것이 아니다.

<div class="row"> 
    <div class="col-md-12" ng-show="(items | filter: { food_option: option }).length > 0"> 
    Opção {{ option }} 
    <table class="table table-calculo table-striped"> 
     <thead> 
     <tr> 
      <th>Alimento</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="foodCalculation in (items | filter: { food_option: option }) track by $index"> 
      <td>{{foodCalculation.food.name}}</td> 
      <td class="text-center"> 
      <button class="btn btn--principal btn--xs" ng-click="edtiFoodCalc(selectedmealcalc, foodCalculation, $index)">Editar</button> 
      <button class="btn btn--principal btn--xs" ng-click="removeFoodCalc(selectedmealcalc, foodCalculation)">Remover</button> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

그리고

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

등이 diretive 내부 '계산-TD-plan.html'호출이 내 지시 JS입니다.

'use strict'; 

angular.module('nutriApp').directive('mealOption', ['$compile', function($compile) { 
    var mealOption = { 
    restrict: 'E', 
    templateUrl: 'views/checkins/meal-options.html', 
    require: 'foodSelector', 
    scope: { 
     option: "@", 
     items: "=", 
     selectedmealcalc: "=" 
    } 
    }; 

    mealOption.controller = ['$scope', 'Food', function($scope, Food) { 
    $scope.sumFood = {}; 
    $scope.summerizeOption = function(foods) { 
     if(foods.length > 0){ 
      $scope.sumFood = Food.summerize(foods); 
     } 
    }; 
    }]; 

    return mealOption; 

}]); 

하지만 지금은 edtiFoodCalc 및 removeFoodCalc를 호출하고있는 함수들이 그냥이 작동하지 않습니다

.

내 지시문에 ng-controller을 입력하면 (메서드 호출 만) 작동하지만 동일한 범위를 가져올 수 없습니다.

<div class="row" ng-controller="CheckinsPlansCtrl"> 

나는 edtiFoodCalc으로 편집하려고하는데 원하는 결과를 얻지 못했습니다. 나는 ng-repeat 일 때 ng-controller이 새로운 범위를 만들고, 지시어가 없을 때 코드가 작동했다고 생각한다.

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

Answer 1

당신은 사용할 수의 각도 &이 지침의 범위는 다시 부모 범위에 값을 전달할 수있는 바인딩. 이 값은 컨트롤러에서 정의 할 필요가 없습니다. 지시문에서 정의한 다음 컨트롤러로 다시 보낼 수 있습니다.

// Controller 
app.controller('MainCtrl', function($scope) { 
    $scope.funcA = function(value, index) { 
    console.log("Called funcA from " + value + " with index " + String(index)); 
    }; 

    $scope.funcB = function(value, index) { 
    console.log("Called funcB from " + value + " with index " + String(index)); 
    } 
}); 

// Directive 
app.directive('arrayDirective', function() { 
    return { 
    templateUrl: "array_directive.html", 
    scope: { 
     controllerFuncA: "&controllerFuncA", 
     controllerFuncB: "&controllerFuncB" 
    }, 
    link: function (scope, element, attr) { 
     scope.items = ["a","b","c","d","e"]; 

     scope.callControllerFuncA = function(i) { 
     console.log("Calling controller funcA!"); 
     scope.controllerFuncA({from: "directive", index: i}); 
     }; 

     scope.callControllerFuncB = function(i) { 
     console.log("Calling controller funcB!"); 
     scope.controllerFuncB({from: "directive", index: i}); 
     }; 
    } 
    }; 
}); 

그리고 다음 템플릿 :

<!-- Controller template --> 
<body ng-controller="MainCtrl"> 
    <array-directive controller-func-a="funcA(from, index)" controller-func-b="funcB(from, index)"></array-directive> 
</body> 

<!-- Directive template --> 
<div> 
    <div ng-repeat="item in items"> 
    <div>{{item}}</div> 
    <div><a href="#" ng-click="callControllerFuncA($index)">Call Controller Func A</a></div> 
    <div><a href="#" ng-click="callControllerFuncB($index)">Call Controller Func B</a></div> 
    </div> 
</div> 

그런 다음 해당 부모 컨트롤러 함수를 호출하는 지시어 내에서 controllerFuncA 및 controllerFuncB를 사용할 수있는 컨트롤러와 지시어를 사용해 예를 들어

, , funcA 및 funcB. 이러한 지시문 함수는 객체을 매개 변수로 사용하며 객체의 키는 <array-directive> 태그의 지시문에 전달 된 키와 일치합니다.

첨부 바이올린을 확인하고 전체 예를 들어 개발자 콘솔 시계 : https://plnkr.co/edit/3h8J00ndBk4OQ16C8hf2