angularjs – angular – 更新指令模板点击
发布时间:2020-12-17 06:52:50 所属栏目:安全 来源:网络整理
导读:我正在尝试使用Angular构建页面. 我说有两个模板 script type='text/ng-template' id='a.html' /*some html using {{data}} */ divbuttonA/button/div/script 和 script type='text/ng-template' id='b.html' /*some html using {{data}} */ divbuttonB/butt
我正在尝试使用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> 我想创建一个指令,当单击模板内的按钮时,它将模板从a更改为b,反之亦然. 解决方法
ng-include是一个漂亮的指令,它接受范围变量作为参数.这样,您就可以动态加载(包括加载模板中的其他指令).请参见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处理 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |