I want to access the volume of the passed element VERY first time when it is inserted into a tag in a directive with an isolated area. I have access to clones of the passed item using the transclude function, but not the first time the item is inserted.
I have the following HTML
<my-directive the-name="'John Doe'"> <my-div name="myDivName"></my-div> </my-directive>
I have two directives. I want to override the contents of my directive and be able to access a variable called "myDivName" from the scope created for the transcluded object. This variable gets its contents from the variable "theName" in the isolated area of the "my-directive" directive.
This is my Javascript code:
var app = angular.module('test', []); app.directive('myDirective', function(){ return { restrict: 'E', template: '', transclude: true, scope:{ theName: '=' }, template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><ng-transclude></ng-transclude><p>This element goes after the transclude</p></div>', link: function(scope, element, attrs, ctrl, transclude){ transclude(function (clone, transcludeScope) { transcludeScope.myDivName = scope.theName; element.append(clone);
As you can see, I use the transclude parameter of the link function in the my-directive directive to set the correct value for the myDivName variable in the transcluded scope. However, this code is only executed after Javascript has replaced the content in the tag in the "my directive" and allows me to add as human clones of the translated content the way I want (I have access to their areas so that there are no problems).
HTML output file
<html> <head> </head> <body ng-app="test" class="ng-scope"> <my-directive the-name="'John Doe'" class="ng-isolate-scope"> <div>Hello I am My Directive and this content goes BEFORE the transclude<br> <ng-transclude> <my-div name="myDivName" class="ng-scope ng-isolate-scope"> <div class="ng-binding"> </div> </my-div> </ng-transclude> <p>This element goes after the transclude</p></div> <my-div name="myDivName" class="ng-scope ng-isolate-scope"> <div class="ng-binding">John Doe</div></my-div> </my-directive> </body> </html>
The problem is that the content was inserted for the first time in the tag in the "my directive". How can I access the area of this very first private clone?
There is an “easy way”, and it should expose the variable of the isolated area of my directive, as this post suggests ngModel requires $ parent when inside the Transcluded html , but I do not want to interpret the parent area of my directive with such variables.