如何在Angular JS中更改指令

Question

summary: click button >> page1 -> page2

i try to make one page site. so my main page is never refreshed but contents will be changed.
here is my main page

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

all contents from directive page1.
but i want to change inner contents using exist directive called 'page2' (page1 -> page2)
so if i click button#click , div#main's contents will be changed

.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
  };
}])

but i can't find a solution how to change directive (page1 -> page2) please help me.

Answer 1

If all you want is conditonnaly load page1.html or page2.html, you can use the ng-include directive.

See its documentation: https://docs.angularjs.org/api/ng/directive/ngInclude

In your case, the html would be

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

and your javascript

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