angular - aktualizujte šablónu smernice po kliknutí - angularjs, angularjs-direktíva

Snažím sa zostaviť stránku pomocou Angular.

Mám dve šablóny, povedzme

<script type="text/ng-template" id="a.html">
/*some html using {{data}} */
<div><button>A</button></div>
</script>

a

<script type="text/ng-template" id="b.html">
/*some html using {{data}} */
<div><button>B</button></div>
</script>

Chcel by som vytvoriť smernicu, ktorá sa meníjeho šablóna od a do b a naopak, keď kliknete na tlačidlo v šablóne. Vyskúšal som niekoľko možností, pozrel som sa na ďalšie odpovede na podobné otázky, ale bez šťastia. Môžete mi pomôcť nájsť najjednoduchší spôsob, ako to urobiť?

odpovede:

ng-include je šikovná smernica, ktorá ako parameter prijíma premennú rozsahu. týmto spôsobom môžete načítať dynamicky (vrátane ďalších smerníc z načítaných šablón). Viď plnkr http://plnkr.co/edit/qxBVDWx6P0F0aNuOymct?p=preview

app.directive("dynamicTemplate", function(){
return {
restrict: "A",
replace: true,
template: "<div><div ng-include="var"></div><div>current var: {{ var }}</div></div>",
controller: function($scope){
$scope.var = "template1.html";
$scope.change = function(where){
$scope.var = where;
}
}
};
});

ale najlepším spôsobom by bolo vyriešiť buď použitie $stateProvider alebo $routeProvider

Toto je odpoveď, ktorá sa nepoužíva ng-include

http://jsfiddle.net/5DGkT/

V podstate ho uchopí z medzipamäte šablón a zostaví

if (newVal) {
element.html($templateCache.get(newVal.type + ".html"));
$compile(element.contents())(scope);
}