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

Question

我的webapp中有一个标签式导航，看起来像这样  

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

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

然后，当用户点击选项卡时，我想再次使用新指令更改和编译内容。但由于某种原因，这是行不通的。您将如何处理以存档此动态内容加载？我真的只想根据需要加载内容，而不仅仅是显示或隐藏它。我认为使用指令是正确的方法，但我只是坚持实现...有人指针吗？ （我不想使用任何jQuery）

我尝试了什么[编辑]：

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>

Answer 1

更新

• $ compile 会返回一个链接函数而不是值，您不能只使用插值将其绑定到模板。
• 您应该使用ngBindHtml代替常规绑定（ngBind＆amp; {{ }}）。
• ngBindHtml 会对所有开箱即用的内容进行编译，链接和观看。
• With ng-bind-html-unsafe removed, how do I inject 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>

---

对于更强大的动态内容加载，您有两个很好的选择：

来自角度团队的
• ngRoute。
来自angular-ui团队的
• ui-router。

如果您想再次更改和编译内容，那么这正是ng-view / ui-view指令已经为您做的。

为什么不使用指令：

• 您可能需要为每个标签加载不同的模板（html partial）。
• 您可能需要根据标签更改网址（反之亦然）
• 您可能需要为每个选项卡实例化不同的控制器。
• ngRoute和ui-router带有自己的指令。
• 如果需要，您可以实现自己的路由模块，但这不仅仅是指令。