Access Parent Scope in Transcluded Directive

by

With transclude: true and scope: true, the parent directive creates two new scopes:
enter image description here

Scope 004 is a result of scope: true, and scope 005 is a result of transclude: true. Since the child directive does not create a new scope, it uses transcluded scope 005. As you can see from the diagram there is no path from scope 005 to scope 004 (except via private property $$prevSibling, which goes in the opposite direction of $$nextSibling — but don’t use those.)

@joakimbl’s solution is probably best here, although I think it is more common to define an API on the parent directive’s controller, rather than defining properties on this:

controller: function($scope) {
    $scope.SOME_CONST = 'someConst';
    this.getConst = function() {
       return $scope.SOME_CONST;
    }
}

Then in the child directive:

link:function(scope,element,attrs,parentCtrl){
    scope.SOME_CONST = parentCtrl.getConst();
},

This is how the tabs and pane directives work on Angular’s home page (“Create Components” example).

More Related Contents:

  1. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  2. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  3. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  4. Confused about Angularjs transcluded and isolate scopes & bindings
  5. Rendering directives within $sce.trustAsHtml
  6. Directive isolate scope with ng-repeat scope in AngularJS
  7. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  8. AngularJS : ng-repeat filter when value is greater than
  9. angularjs share data config between controllers
  10. How to modify scope from within a directive in AngularJs
  11. Call a method of a controller from another controller using ‘scope’ in AngularJS
  12. How to detect browser using angularjs?
  13. ng-click doesn’t work within the template of a directive
  14. How do I use $scope.$watch and $scope.$apply in AngularJS?
  15. Controller not a function, got undefined, while defining controllers globally
  16. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  17. Angular directives – when and how to use compile, controller, pre-link and post-link [closed]
  18. How to autocapitalize the first character in an input field in AngularJS?
  19. How to understand the `terminal` of directive?
  20. angularJS: How to call child scope function in parent scope
  21. AngularJS Group By Directive without External Dependencies
  22. How to use “ng-repeat” within template of a directive in Angular JS?
  23. How to set the dynamic controller for directives?
  24. Bind class toggle to window scroll event
  25. Angular adds strange options into select element when setting model value
  26. How to trigger a method when Angular is done adding scope updates to the DOM?
  27. Model in a modal window in angularjs is empty
  28. AngularJS controller inheritance
  29. AngularJS. Convert tag value (Unix time to human-readable time)
  30. how do I get ng-include directive to work with a Content Delivery Network?

Leave a Comment