AngularJS load tabbed content directive dynamicly

Question

I have a tabbed navigtion in my webapp that looks like this enter image description here

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>

I updated my answer. When you ask questions, please avoid `for some reason this is not working` and provide a code example instead, so it can be reproduced . It will save everyone lots of time and misunderstanding. Let the code explain why its not working. — Ilan Frumer, Jan 17 '14 at 09:53

score 1 · Accepted Answer · edited May 23 '17 at 12:30

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.

I just want to update the directive to another one or change the template of the directive. Not to change the whole view. — Johnny000, Jan 16 '14 at 15:31

AngularJS load tabbed content directive dynamicly

1 Answers1

UPDATE

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

Why not just use a directive:

Linked