AngularJS 动态加载标签内容指令 [英] AngularJS load tabbed content directive dynamicly

问题描述

我的 web 应用中有一个标签式导航，如下所示

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

$scope.currentDirective = $compile('
');

然后当用户单击选项卡时，我想使用新指令再次更改和编译内容.但由于某种原因，这是行不通的.为了存档这种动态内容加载，您将如何进行?我真的只想在必要时加载内容，而不仅仅是显示或隐藏它.我认为使用指令是正确的方法，但我只是坚持执行......有人有任何指针吗?(我不想使用任何 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

<li><a ng-click="changeTemplate('1')">更改模板</a>{{当前模板}}

解决方案

UPDATE

• $compile 返回一个链接函数不是值，您不能仅仅通过插值将其绑定到您的模板.
• 您应该使用 ngBindHtml 而不是常规绑定( ngBind & {{ }} ).
• ngBindHtml 可以开箱即用地进行编译、链接和查看.
• 使用 ng-bind-html-已删除不安全，如何注入 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]);};}]);

标记:

 
<button ng-click="changeTemplate('1')">更改模板</button><div ng-bind-html="currentTemplate"></div>

<小时>

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

• ngRoute 来自 angular 团队.
• ui-router 来自 angular-ui 团队.

如果您想再次更改和编译内容，那正是 ng-view/ ui-view 指令已经为你.

为什么不直接使用指令:

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

I have a tabbed navigtion in my webapp that looks like this

Now I want to Change the directive each time the user clicks on one of the Navigation points. My Idea was to init the page with the first template.

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

Then when the user clicks on a tab, I wanted to change and compile the content again with a new directive in it. But for some reason this is not working. How would you proceed in order to archive this dynamic content loading? I really want to only load the content on necessary need and not just to show or hide it. I think using directives is the right way to go for it, but I'm a but stuck at the implementation... Someone any pointer ? (I don't want to use any jQuery)

What I tried [Edit]:

The 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]);

      };

  }]);

The HTML

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

解决方案

UPDATE

• $compile returns a linking function not a value, you cannot just bind it to your template with interpolation.
• You should use ngBindHtml instead of regular bindings ( ngBind & {{ }} ).
• ngBindHtml does compiling, linking and watching all out-of-the-box.
• With ng-bind-html-unsafe removed, how do I inject HTML?

Here is a 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]);
    };
  }]);

The markup:

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

---

For more robust dynamic content loading you have two good alternatives:

• ngRoute from angular team.
• ui-router from angular-ui team.

If you want to change and compile the content again, well that's exactly what ng-view/ ui-view directives already do for you.

Why not just use a directive:

• You probably need to load a different template (html partial) for each tab.
• You probably need to change the url based on the tab (and vice versa)
• You probably need to instantiate a different controller for each tab.
• ngRoute and ui-router come with their own directives.
• You can implement your own route module if you want but that's more than just a directive.

这篇关于AngularJS 动态加载标签内容指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！