AngularJS负载选项卡内容指令动态 [英] AngularJS load tabbed content directive dynamicly

问题描述

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

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

  $ scope.currentDirective = $ compile（'< div order-塞尔>< / DIV>'）; 
  

然后，当用户点击标签时，我想再次使用新的指令中但是由于某种原因，这是不行的。为了归档这个动态内容加载，你将如何处理？我真的只想按需要加载内容，而不只是显示或隐藏它。我认为使用指令是正确的方法，但我是一个但坚持执行...有人任何指针？ （我不想使用任何jQuery）

我试过了：

strong> 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

 < divng-controller =pageController> 
< li> 
< a ng-click =changeTemplate（'1'）>更改模板< / a> 
< / li> 
 {{currentTemplate}} 
< / div> 
  

解决方案

更新

• $ compile 返回一个链接功能不是一个值，您不能用插值将其绑定到您的模板。


• 您应该使用 ngBindHtml 而不是常规绑定（ ngBind & {{}} ）。


• ngBindHtml 将编译，链接并观看所有开箱即用的。


• 删除ng-bind-html-unsafe，如何注入HTML？

这是一个 plunker

  app.controller（'pageController'，['$ scope'，'$ compile'，'$ sce'，function $范围，$ 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]）; 
}; 
}]）; 
  

标记：

 < divng-controller =pageController> 
< button ng-click =changeTemplate（'1'）>更改模板< / button> 
< divng-bind-html =currentTemplate>< / div> 
< / div> 
  

---

为了更强大的动态内容加载，您有两个好的替代方案：

• ngRoute 。


• ui-路由器来自角色团队。

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

为什么不使用一个指令：

• 你可能需要加载一个不同的模板）


• 您可能需要根据标签更改网址（反之亦然）


• 您可能需要实例化一个不同的控制器。


• 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屋！