kątowy - szablon dyrektywy aktualizacji na kliknięcie - angularjs, dyrektywa angularjs

Próbuję zbudować stronę za pomocą Angulara.

Mam dwa szablony, powiedzmy

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

i

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

Chciałbym stworzyć dyrektywę, która się zmieniajego szablon od a do b i odwrotnie, gdy przycisk wewnątrz szablonu zostanie kliknięty. Próbowałem kilku opcji, patrząc na inne odpowiedzi na podobne pytania, ale bez powodzenia. Czy możesz mi pomóc znaleźć najłatwiejszy sposób na zrobienie tego?

Odpowiedzi:

ng-include to sprytna dyrektywa, która jako parametr przyjmuje zmienną zasięgu. w ten sposób można dynamicznie ładować (w tym inne dyrektywy z załadowanych szablonów). Zobacz 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 najlepszym sposobem byłoby po prostu poradzić sobie z użyciem either $stateProvider lub $routeProvider

Oto odpowiedź, której nie używam ng-include

http://jsfiddle.net/5DGkT/

Zasadniczo pobiera go z pamięci podręcznej szablonów i kompiluje

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