角 - 在点击更新指令模板 [英] angular - update directive template on click
问题描述
我想使用角度来构建一个页面。
I am trying to build a page using Angular.
我有两个模板,说
<script type='text/ng-template' id='a.html'>
/*some html using {{data}} */
<div><button>A</button></div>
</script>
和
<script type='text/ng-template' id='b.html'>
/*some html using {{data}} */
<div><button>B</button></div>
</script>
我想创建模板内的按钮被点击时,改变从它的模板,b和反之亦然指令。
我试了几个选项,寻找其他的答案类似的问题,但没有任何运气。
你能帮我找到做最简单的方法?
I would like to create a directive that changes its template from a to b and vice versa when the button inside the template gets clicked. I tried several options, looking at other answers to similar questions, but without any luck. Can you help me to find the easiest way to do this?
推荐答案
NG-包括
是接受范围的变量作为参数一记漂亮的指令。这样,你就可以动态加载(包括从装载模板其他指令)。见plnkr <一个href=\"http://plnkr.co/edit/qxBVDWx6P0F0aNuOymct?p=$p$pview\">http://plnkr.co/edit/qxBVDWx6P0F0aNuOymct?p=$p$pview
ng-include
is a nifty directive that accepts a scope variable as the parameter. this way, you can dynamically load (including other directives from the loaded templates). See the 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;
}
}
};
});
但最好的方法是只处理或者使用 $ stateProvider
或 $ routeProvider
这篇关于角 - 在点击更新指令模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!