각도 js에서 지침을 변경하는 방법

Question

요약 : 클릭 버튼 >> page1 -> page2

나는 한 페이지의 사이트를 만들려고합니다. 내 메인 페이지는 결코 리프레쉬되지 않지만 내용은 변경 될 것입니다.
여기 내 메인 페이지

<button id="click"></button> 
<div id="main"> 
    <page1></page1> 
</div> 

지시문 PAGE1의 모든 내용입니다. '- (> 페이지 2 PAGE1) 내가 버튼을 # 클릭을 클릭하면
그래서, DIV # 메인의 내용

.controller('MyCtrl', function MyCtrl($scope) { 
    $scope.showTask = function(){ 
     var main = angular.element(document.querySelector('#main')); 


    }; 
}) 

.directive('page1', [function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     templateUrl: page1.html, 
     replace: true 
    }; 
}]) 

.directive('page2', [function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     templateUrl: page2.html, 
     replace: true 
    }; 
}]) 

을 변경됩니다하지만 난 할 수
는하지만 난'페이지 2 '라는 지시어를 존재하여 내부 내용을 변경하려면 지시어 (page1 -> page2)를 바꾸는 방법을 찾으십시오. 저를 도와주세요.

Answer 1

원하는 경우 page1.html 또는 page2.html을 조건부로로드하려면 ng-include 지시어를 사용할 수 있습니다. 귀하의 경우에는 https://docs.angularjs.org/api/ng/directive/ngInclude

는, html로는

<button id="click" ng-click="selectPage()"></button> 
<div id="main" ng-include="page"></div> 

와 자바 스크립트

$scope.selectPage = function() { 
    // Decide which page to load here, for instance 
    $scope.page = 'page1.html'; 
};