dynamic - AngularJS动态加载选项卡式内容指令

  显示原文与译文双语对照的内容

我的web webapp中有一个选项卡式 navigtion,看起来像这样 enter image description here

现在我想在用户每次点击某个导航点时更改指令。 我的想法是用第一个模板来初始化页面。


$scope.currentDirective = $compile('<div order-Sale></div>');

然后当用户点击一个标签时,我想用一个新的指令再次修改和编译内容。 但由于某些原因。 你将如何继续归档这里动态内容加载? 我只希望在必要的需要时加载内容,而不只是显示或者隐藏它。 我认为使用指令是正确的方法,但是我是一个不错的实现。 有人有指针( 我不希望使用任何 jQuery )?

我尝试了 [Edit]:

英镑的controller.js


 app.controller('pageController',['$scope','$compile', function($scope, $compile){

 var templates = ['<div first-template></div>','<div second-template></div>'];

 $scope.currentTemplate = $compile(templates[0]);

 $scope.changeTemplate = function(id) {

 $scope.currentTemplate = $compile(templates[id]);

 };

 }]);

的html


<div ng-controller="pageController">
 <li>
 <a ng-click="changeTemplate('1')">Change Template</a>
 </li>
 {{currentTemplate}}
</div>

时间: 作者:

更新

  • 英镑 $compile returns返回链接函数,你不能仅仅用插值将它绑定到你的模板。
  • 你应该使用 ngBindHtml 而不是常规绑定( ngBind & {{ }} ) 。
  • ngBindHtml 编译,链接和观看所有 out-of-the-box 。
  • 删除了ng-bind-html-unsafe的,如何插入 HTML

这里是 plunker


 app.controller('pageController',['$scope','$compile','$sce', function($scope, $compile, $sce){
 var templates = ['<div>first-template</div>','<div>second-template</div>'];
 $scope.currentTemplate = $sce.trustAsHtml(templates[0]);
 $scope.changeTemplate = function(id) {
 $scope.currentTemplate = $sce.trustAsHtml(templates[id]);
 };
 }]);

标记:


 <div ng-controller="pageController">
 <button ng-click="changeTemplate('1')">Change Template</button>
 <div ng-bind-html="currentTemplate"></div>
 </div>


对于更强大的动态内容加载,你有两个不错的选择:

如果你想再次更改和编译内容,那么 ng-view / ui-view 指令已经为你做了。

为什么不直接使用指令:

  • 你可能需要为每个标签加载一个不同的模板( html部分) 。
  • 你可能需要根据标签更改 url ( 反之亦然)
  • 你可能需要为每个标签实例化一个不同的控制器。
  • ngRouteui-router 有它们自己的指令。
  • 如果需要,可以实现自己的路由模块,但这不仅仅是一个指令。
作者:
...