Reference

Reference plunker: http://plnkr.co/edit/otv5mVVQ36iPi3Mp0FYw?p=preview

Explanation of the issue

Suppose that we have two directives, first-directive and second-directive . Now suppose we only have access to first-directive which we hope to wrap second-directive with and pass to it our own manipulated attributes.

app.directive('firstDirective', function() { return { scope: true, priority: 1000, transclude: true, template: function(element,attributes){ console.log('template') return '<second-directive two="{{one}}"></second-directive>' }, compile: function(element,attributes) { console.log('compile') return { pre: function(scope){ scope.one = 'foo' console.log('cpre') }, post: function(scope){ scope.one = 'foo' console.log('cpost') }, } }, controller: ['$scope','$attrs',function($scope,$attrs){ console.log('controller'); $scope.one = 'foo'; }], } }) app.directive('secondDirective',function(){ return { template: function (element,attributes){ console.log(attributes.two) //{{one}} not 'foo' or 'test' return 'Hello {{two}}' } } });

first-directive is being called as follows:

<first-directive one='test'></first-directive>

console.log output as follows:

template compile {{one}} controller cpre cpost

So from this I've learned that template is called before compile. This is a peculiar from my novice eyes because there isn't anyway to manipulate the value passed back by the template function through compile, controller, pre, or post link!

The question is this:

How can I call the second-directive with the dynamic attribute value that I want? Keep in mind that second-directive is completely independent and we can't add code there.

PS - One possible idea I have is to call the second-directive as follows:

template: function(element,attributes){ console.log('template') var explicit = ???? /* how to access scope? */ return '<second-directive two="'+ explicit +'"></second-directive>' },

or alternatively

template: function(element,attributes){ console.log('template') return $interpolate('<second-directive two="{{one}}"></second-directive>')(scopeObj) /* how does one access scopeObj with current scope values here? */ },

Yet, again, I'm not sure how to get the value being passed to first-directive before any of the other functions are called. Controller has access to $scope and it is called AFTER template.

Your suggestions greatly appreciated.