자식 지시문에 대한 메서드를 호출하는 각도 지시문

Question

지시문 (<partition>)이 하위 지시문의 제어기 (<property-value>)에서 메소드를 호출 할 수있는 각도로 계층 구조를 구현하는 방법에 대한 조언을 찾고 있습니다.

여기 함께 자세한 예를 뒀다 :
https://jsfiddle.net/95kjjxkh/1/

당신이 볼 수 있듯이, 내 코드 내에서 하나 개 이상의 <property-value> 지시를 표시하는 외부 지시, <partition>가 포함되어 있습니다.

지시문 editItem()은 사용자가 단일 항목의 값을 변경할 수있는 편집 방법을 제공합니다. 여기에 임의의 숫자를 지정하기 만하면됩니다.하지만 프로덕션 앱에서는 새 값을 사용자에게 묻는 모달이 표시됩니다.

괜찮습니다. 그러나 외부 지시문 <partition>에서 새 비어있는 <property-value> 지시문을 만드는 기능을 추가하고 즉시 사용자가 초기 값을 입력 할 수 있도록 편집 방법을 호출하고 싶습니다. 초기 값을 입력하지 않으면 새 항목이 삭제됩니다.

내부 지시문을 사용하여 주변 지시문에 대한 메소드를 호출하는 예를 보았지만 그 반대의 경우는 없습니다.

이 방법이 있습니까? 또는, 이런 종류의 견해를 만드는 더 좋은 방법이 있습니까?

Answer 1

언제나 $ broadcast를 사용하여 두 가지 방식으로 대화 할 수 있습니다. 부모뿐만 아니라 자녀에게도. 자녀 컨트롤러에서

Answer 2

당신이 파티션 컨트롤러에서이

link:function(scope,element,attrs,partitionCtrl){ 
    partitionCtrl.getChildCtrl(element) 
    } 

같은 자식 지침의 링크 기능의 부모 컨트롤러를 얻을 것이다이 다음과 같은

app.directive('propertyValue', function() { 
return { 
    require : '^partition' 
    restrict: 'E', 
    scope: { 
     item: '=' 
    }, 

을 할 수는 getChildCtrl 기능과과를 만들 그 "속성 값"컨트롤러 함수를 호출

controller: function ($scope, ItemFactory) { 
// your code 
var propValueCtrl =undefined; 
this.getChildCtrl =function(elem) 
{ 
    propValueCtrl = elem.controller(); 
} 
this.callChildFunction = function() 
{ 
    propValueCtrl.Edit();// whatever is the name of function 
} 

속성 링크 기능에서 필요할 때이 함수를 호출하십시오.

희망이 도움이됩니다.

Answer 3

당신은 컨트롤러와 지침이 코드를 시도 할 $rootScope.$broadcast();를 사용할 수 있습니다

는

var app = angular.module('miniapp', []); 

app.directive("addCheckbox", function() { 
     return { 
      "restrict": "E", 
      "replace": true, 
      "scope": true, 
      "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>', 
      "link": function($scope, $elem, attrs) { 
        $elem.bind("click", function() { 
         $scope.checkboxChecked = !$scope.checkboxChecked; 
       }) 

     $scope.$on("changeCheckbox", function(event, args) { 
      $scope.checkboxChecked = !$scope.checkboxChecked; 
     }) 
     } 
    } 
}) 

app.controller("myController", function($scope, $rootScope) { 
    $scope.changeCheckbox = function() { 
     $scope.checkboxChecked = !$scope.checkboxChecked; 
     $rootScope.$broadcast('changeCheckbox', {}); 

    } 
}) 

Working Fiddle Demo