我正在尝试使用 Angular 构建一个页面。
我有两个模板,比如说
<script type='text/ng-template' id='a.html'>
/*some html using {{data}} */
<div><button>A</button></div>
</script>
and
<script type='text/ng-template' id='b.html'>
/*some html using {{data}} */
<div><button>B</button></div>
</script>
我想创建一个指令,当单击模板内的按钮时,将其模板从 a 更改为 b,反之亦然。
我尝试了几种选择,查看类似问题的其他答案,但没有任何运气。
你能帮我找到最简单的方法吗?
ng-include
是一个漂亮的指令,它接受范围变量作为参数。这样,您可以动态加载(包括加载模板中的其他指令)。参见 plnkrhttp://plnkr.co/edit/qxBVDWx6P0F0aNuOymct?p=preview 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
or $routeProvider
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)