AngularJS Scope and tab directive

Question

I just can't get how AngularJS scope works.

I have an ui-tabs Directive, with a tab controller. This is supposed to handle tabbed content.

This tab directive can contains 2 others directive, heading-template Directive, which is the template for the tab heading, and tab-pane Directive, which is the panes to show/hide.

The tab directive can have 2 behaviors : if the attr templated is on the element, then we use an empty template, and we will use later the heading-template Directive to generate tabs heading.

Else, we use a template which generates ul list with each panes title.

The problem is the heading-template Directive : this Directive simply binds the ng-repeat Directive to the template and compiles it.

But I can't have access to the scope.panes, which are located in Tab Directive's controller scope. The directive simply don't find them, and I don't understand why.

Here's the JSFiddle : http://jsfiddle.net/whitep4nther/mwk9gp9x/

Thank you for your help, I'm turning crazy

runTarm · Accepted Answer · 2014-08-09 12:54:42Z

1

Lately, I found a lot of people have problems with the same root cause:

The ng-transclude doesn't work in a way that you are expecting.

It's by design that content added via ng-transclude will be binded with an outer (original) scope, not a scope of the current element that ng-transclude is on.

In your case the content added via ng-transclude in templated-heading.tpl.html will be binded with the $rootScope, not the isolate scope of uiTabs directive.

If you want the transcluded content to be binded with the isolate scope, you could use a modified version of ng-tranclude like this:

.directive('myTransclude', function () {
  return {
    restrict: 'EAC',
    link: function(scope, element, attrs, controllers, transcludeFn) {
      transcludeFn(scope, function(nodes) {
        element.empty();
        element.append(nodes);
      });
    }
  };
});

And use it in the template:

<script type="text/ng-template" id="/templated-heading.tpl.html">
  <div class="ui-tabs" my-transclude>
  </div>
</script>

Example JSFiddle: http://jsfiddle.net/a7fjb9sr/1/

answered Aug 9, 2014 at 12:54

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yachaka Over a year ago

Thanks for the answer, although I already found the same solution. I must admit it's very confusing when you start, but now it seems clearer.

Collectives™ on Stack Overflow

AngularJS Scope and tab directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related