각도 : 별도의 컨트롤러에서 지시문 컨트롤러 기능을 호출하십시오.

Question

myApp라는 앱이 있다고 가정 해 봅니다. 메뉴 구성 요소에 대한 지시문이 있습니다. 이 지시어에는 컨트롤러가 정의되어 있습니다. 이제 뷰를로드하는 다른 컨트롤러에서 해당 메뉴 지시자의 컨트롤러 메서드를 호출하려고합니다.

코드를 어떻게 보이나요? 어떻게 다른 컨트롤러가 메뉴 지시자의 컨트롤러에서 메서드를 호출 할 수 있습니까?

Answer 1

나는 controller -> directive을 호출하려고하는데, 위임하는 일부 기능에 대한 호출을 controller <- directive으로 바인딩해야한다고 생각합니다. 당신이 콜백으로 함수에 결합 할 수 있습니다 & 표현을 사용

.directive('tab', ['$parse', function($parse) { 
    return { 
    require: '^tabset', 
    restrict: 'EA', 
    replace: true, 
    templateUrl: 'template/tabs/tab.html', 
    transclude: true, 
    scope: { 
     active: '=?', 
     heading: '@', 
     onSelect: '&select', //This callback is called in contentHeadingTransclude 
          //once it inserts the tab's content into the dom 
     onDeselect: '&deselect' 
    }, 
    // etc. 

이의 예를 들어

, 당신은 angular-ui/bootstrap's tabs directive onSelect를하고 onDeselect을 확인할 수 있습니다.

$scope.selectedTab = function(){ alert('woohoo'); }; 

보기에 지시어의 기능에 '바인딩'입니다 :

<tab select="selectedTab()"> 

탭

이 사용의 예는 대상 컨트롤러의 범위 바인딩 기능이 될 것입니다 지시문에는 두 개의 다른 지시문 제어기간에 통신하는 방법에 대한 좋은 예가 있습니다. See tabset controller's ctrl.select. tab 지시어와 부모 tabSet 컨트롤러를 필요로하는이 필요합니다

.directive('tab', ['$parse', function($parse) { 
    return { 
    require: '^tabset', 

tab 지시어는 컴파일 기능에 tabset 컨트롤러의 선택 기능에 액세스 할 수 있습니다

compile: function(elm, attrs, transclude) { 
    return function postLink(scope, elm, attrs, tabsetCtrl) { 
    scope.$watch('active', function(active) { 
     if (active) { 
     tabsetCtrl.select(scope); 
     } 
    }); 

    scope.disabled = false; 
    if (attrs.disabled) { 
     scope.$parent.$watch($parse(attrs.disabled), function(value) { 
     scope.disabled = !! value; 
     }); 
    } 

    scope.select = function() { 
     if (!scope.disabled) { 
     scope.active = true; 
     } 
    }; 

    tabsetCtrl.addTab(scope); 
    scope.$on('$destroy', function() { 
     tabsetCtrl.removeTab(scope); 
    }); 

    //We need to transclude later, once the content container is ready. 
    //when this link happens, we're inside a tab heading. 
    scope.$transcludeFn = transclude; 
    }; 
} 

을 그래서 당신은에서 코드를 실행하는 방법이 당신의 지시어에서 일어나는 어떤 행동의 결과로서 어떤 비 지시 적 컨트롤러와 지시어 require 제약의 결과로서 어떤 지시어 기능을 실행하는 방법.

편집 : http://docs.angularjs.org/api/ng/service/는 $ # 포괄적-지침-API를