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

Question

我的 web 应用中有一个选项卡式导航，看起来像这样

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

$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 和{{ }}）。
• 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-router 来自 angular-ui 团队。

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

为什么不直接使用指令：

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