javascript - navigation between templates using directives angular JS -

javascript - navigation between templates using directives angular JS -

i trying navigate between different html templates on click of button.

i have main html , sub html.

main.html:

<div id="main"></div>

sub.html:

<div id="sub"></div>

index.html:

<my-clicker on-click="buttonclicked($event)"> <button class="new_btn">click me</button> </my-clicker>

directive code:

app.directive('myclicker', function () { homecoming { restrict: 'e', scope: { onclick: "&" }, link: function($scope, element, attrs) { var button = $('.new_btn'); button.bind("click", $scope.onclick); element.append(button); } }; });

controller:

$scope.buttonclicked = function($event) { alert('hai'); };

now how add together template urls button click event. can please help me out sample how can accomplish scenario.

so according comments usecase here swap out 1 specific part of dom when clicking button.

in case don't need custom directive, should utilize ng-include. ng-include directive placed on div (or other dom element) , makes element load content specified template. can specify template variable , when want swap content of div alter variable.

here example:

<div id="swappable-content-area" ng-include src="currenttemplate"> <!-- content appear here --> </div> <button ng-click="currenttemplate = 'mytemplate.html'">template 1</button> <button ng-click="currenttemplate = 'myothertemplate.html'">template 2</button>

the buttons of course of study part of included template.

javascript jquery angularjs angularjs-directive