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

问题描述

我在我的web应用程序选项卡式navigtion看起来像这样
 

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

  $ scope.currentDirective = $编译（'＆LT; D​​IV订单销售＆GT;＆LT; / DIV＆GT;'）;
 

然后，当用户点击一个标签，我想改变，在一个新的指令重新编译的内容。但出于某种原因，这是行不通的。你如何才能归档此动态内容加载进行？我真的想只加载必要对需要的内容，而不只是显示或隐藏它。我认为，使用指令是去正确的方式，但我是一个，但停留在执行......有人任何指针？ （我不希望使用任何的jQuery）

我试过​​：

在 controller.js

  app.controller（'的PageController'，['$范围，$编译，函数（$范围，$编译）{      VAR模板= ['＆LT; D​​IV第一模板＆GT;＆LT; / DIV＆GT;'，'＆LT; D​​IV第二模板＆GT;＆LT; / DIV＆GT;'];      $ scope.currentTemplate = $编译（模板[0]）;      $ scope.changeTemplate =功能（ID）{        $ scope.currentTemplate = $编译（模板[ID]）;      };  }]）;
 

在 HTML

 ＆LT; D​​IV NG控制器=的PageController＆GT;
    ＆LT;立GT;
        ＆LT;一个NG点击=changeTemplate（1）＆GT;更改模板＆LT; / A＆GT;
    ＆LT; /李＆GT;
    {{currentTemplate}}
＆LT; / DIV＆GT;
 

解决方案

更新

• $编译返回一个链接功能的不是值，你不能只是把它绑定到插值模板。


• 您应该使用 ngBindHtml ，而不是常规的绑定（ ngBind ＆放大器; {{}} ）


• ngBindHtml 做编译，链接，看所有的外装即用。


• With NG-绑定-HTML不安全的删除，我怎么注入HTML？

下面是一个 plunker

  app.controller（'的PageController'，['$范围，$编译，$ SCE'，函数（$范围，$编译，$ SCE）{
    VAR模板= ['＆LT; D​​IV＆gt;首先，模板和LT; / DIV＆GT;'，'＆LT; D​​IV＆gt;第二个模板＆LT; / DIV＆GT;'];
    $ scope.currentTemplate = $ sce.trustAsHtml（模板[0]）;
    $ scope.changeTemplate =功能（ID）{
      $ scope.currentTemplate = $ sce.trustAsHtml（模板[ID]）;
    };
  }]）;
 

的标记：

 ＆LT; D​​IV NG控制器=的PageController＆GT;
    ＆LT;按钮NG点击=changeTemplate（1）＆GT;更改模板＆LT; /按钮＆GT;
    ＆LT; D​​IV NG绑定-HTML =currentTemplate＆GT;＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
 

---

为了更加稳健动态内容加载你有两个很好的选择：

• ngRoute 从棱角分明的团队。


• UI路由器从角UI小组。

如果你想改变和重新编译的内容，以及这正是 NG-视图的 / 的用户界面 - 查看指令已经为你做。

为什么不直接使用指令：

• 您可能需要加载不同的模板（HTML部分）为每个标签。


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


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


• ngRoute 和 UI路由器带着自己的指令。


• 您可以实现自己的路由模块，如果你想要但是这不仅仅是一个指令的详细。

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