2017-05-10 5 views
0

에 ParentController 내부 ChildController을 알리는 방법은 아래 코드와 유사한 코드가 있습니다. 부모 영역 안의 버튼 중 하나가 클릭되면 하위 영역을 표시하려고합니다. 또한 클릭 한 버튼에 다른 기능을 기본으로 호출 한 다음 결과를 $scope.nameListChildController 안에 할당하고 데이터를 표시해야합니다. 이 작업을 수행하는 것이 가장 좋은 방법이 무엇인지 궁금합니다.는 AngularJS와

+0

문제를 해결할 수 있었습니까? –

답변

0

$scope에서 $broadcast 방법을 사용하거나 간단한 $scope 상속을 사용할 수 있습니다. 첫 번째 접근부터 시작합시다.

HTML :

<div ng-controller="ParentController"> 
    <button ng-click="showSection('sectionA')">Show Section A</button> 
    <button ng-click="showSection('sectionB')">Show Section B</button> 
    <div ng-controller="ChildController"> 
     <section ng-if="showSection.sectionA">SOME CONTENT HERE</section> 
     <section ng-if="showSection.sectionB">SOME CONTENT HERE</section> 
    </div> 
</div> 

ParentController :

function ParentControler($scope) { 

    $scope.showSection = function (section) { 
     $scope.$broadcast('ParentController.showSection', section); 
    } 

} 

ChildController :

function ChildController($scope) { 

    $scope.showSection = { 
     sectionA: false, 
     sectionB: false 
    }; 

    $scope.$on('ParentController.showSection', (event, section) => { 
     $scope.showSection[section] = true; 
    } 

} 

아니면했습니다 수 단지 $scope 상속을 사용하십시오.이 경우에는 충분합니다.

HTML은 이전 예제와 동일합니다.

ParentController :

function ParentControler($scope) { 

    $scope.showSection = { 
     sectionA: false, 
     sectionB: false 
    }; 

    $scope.showSection = function (section) { 
     $scope.showSection[section] = true; 
    } 

} 

ChildController :

function ChildController($scope) { 

    // 

} 

그것은 당신이 장기적으로 달성 하려는지에 따라 달라집니다. 이 왕을하기위한 간단한 해결책을 찾고 있다면 $scope 상속을 사용하십시오. 이 두 컨트롤러간에 좀 더 정교한 통신이 필요하면 이벤트 방법을 선택하십시오.