Why ng-transclude’s scope is not a child of its directive’s scope – if the directive has an isolated scope?

by

Why ng-transclude’s scope is not a child of its directive’s scope if the directive has an isolated scope?

ng-transclude designed to allow directives to work with arbitrary content, and isolated scopes are designed to allow directives to encapsulate their data.

If ng-transclude didn’t preserve scopes like that, any arbitrary content that you’re transcluding would need to know the implementation details of your directive (i.e. it would need to know what’s available on the isolated scope you created).

If it’s not a bug, how can a container directive pass data to it’s content, if not by setting attributes like I tried.

If the container directive and contained directives are coupled – i.e. you wrote both of them and need them to act together – then they should communicate via a shared controller.

If the container directive is supposed to inject content into the scope of the children (e.g. ng-repeat), then you shouldn’t be using an isolated scope.

The angular documentation is quite clear on what the behaviour is supposed to be:

“In a typical setup the widget creates an isolate scope, but the
transclusion is not a child, but a sibling of the isolate scope. This
makes it possible for the widget to have private state, and the
transclusion to be bound to the parent (pre-isolate) scope.”

More Related Contents:

  1. angular.service vs angular.factory
  2. How to add custom validation to an AngularJS form?
  3. How do you prevent duplicate user properties in Firebase?
  4. What is the difference between ng-if and ng-show/ng-hide
  5. Link vs compile vs controller
  6. Angular.js directive dynamic templateURL
  7. Using protractor with loops
  8. Angularjs $q.all
  9. passing 2 $index values within nested ng-repeat
  10. Should I use `this` or `$scope`?
  11. AngularJS $http, CORS and http authentication
  12. Angularjs loading screen on ajax request
  13. AngularJS UI Router – change url without reloading state
  14. Reading response headers when using $http of Angularjs
  15. AngularJS ng-options create range
  16. $provide outside config blocks
  17. angular.min.js.map not found, what is it exactly?
  18. AngularJS – difference between pristine/dirty and touched/untouched
  19. Angularjs wrong $index after orderBy
  20. ng-options with disabled rows
  21. How/when to use ng-click to call a route?
  22. What’s the best way to cancel event propagation between nested ng-click calls?
  23. Can someone provide an example of a $destroy event for scopes in AngularJS?
  24. Angular.js programmatically setting a form field to dirty
  25. How to detect browser using angularjs?
  26. How can I preserve new lines in an AngularJS partial?
  27. Exclamation mark after hash (#!) in angularjs app
  28. XMLHttpRequest cannot load and Response for preflight has invalid HTTP status code 405
  29. Prepend optional attribute in angular ui-router URL
  30. E2E mock $httpBackend doesn’t actually passThrough for me

Leave a Comment