angularJS의 paren-child 지시어 사이의 통신

Question

login 및 rankSelector의 두 지시문을 만들었습니다. 아래 코드에서 볼 수 있듯이 로그인은 rankSelector 내부에서 사용됩니다. 그러나이 두 지시어 사이의 통신을 구현하는 적절한 방법은 무엇인지 모르겠습니다. rankSelector은 login의 부모이며 login 지시어에서 몇 가지 변경 사항이 언제 발생하는지 알아야합니다. ATM 에있는 컨트롤러를 사용합니다. 방법은 login이며 부모 지시문에 변경 사항을 알릴 필요가있을 때 호출합니다. 코드는 다음과 같습니다 :

<script type="text/ng-template" id="rankSelector.html"> 

     <form name="rankings" novalidate> 

      <div> 

       <div login></div> 

       <!-- if passwords match show this --> 

       <input type="text" ng-model="someOtherField" name="someOtherField" ng-show="passwordsMatch" ng-hide="!passwordsMatch" /> 

      </div> 

     </form> 

    </script> 

그리고 내 지침 : 여기 옳은 일을하는 경우

가

app.directive("login", [ 

    function(loginService) { 
     return { 
      templateUrl: "login.html", 
      replace: true, 
      require: "?^rankSelector", 
      scope: true, 
      link: function(scope, elem, attrs, ctrl) { 
       scope.$watch("confirmPassword", function(newValue, oldValue) { 

        // also how in here I can check if scope.password is $valid without douing checks manually? 
        ctrl.passwordsMatch(scope.password && scope.password === scope.confirmPassword); 
       }); 
      } 
     }; 
    } 
]); 

app.directive("rankSelector", [ 

    function(rankingsService, $rootScope) { 
     return { 
      templateUrl: "rankSelector.html", 
      replace: true, 
      controller: ["$scope", 
       function($scope) { 
        this.passwordsMatch = function(showConfirm) { 
         $scope.passwordsMatch = showConfirm; 
        } 
       } 
      ], 
      scope: true, 
      link: function(scope, elem, attrs) { 
       scope.passwordsMatch = false; 
      } 
     }; 
    } 
]); 

확실하지 login 지시문을 인식 할 필요가로 어떤 컨트롤러가 삽입 될지를 결정해야한다. 내가 알아야 할이 접근법에 명백한 문제가 있습니까?

도 login 지시문 내에서 $watch의 전화 번호부가 $valid인지 확인하려면 어떻게해야합니까?

Answer 1

범위 체인 위로 정보를 전달하는 가장 좋은 방법은 이벤트를 사용하는 것입니다. 귀하의 경우, 귀하의 로그인 지시문은 부모 지시문이 반응하기를 바라는 상황이 발생하면 이벤트를 내 보내야합니다.

scope.$emit('somethingChanged', anyData); 

그런 다음 rankSelector에 당신은 이벤트를 수신 할과

scope.$on('somethingChanged', function($event, anyData) { 
    // react to the change 
}) 

반응