AngularJS: Cannot interpolate attribute from first directive to a second. (w/ plunker example)

Question

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.

Answer 1

Well if you just want to pass the data from first directive to second directive template, then you can add the dynamics attribute in first directive controller using
this.fromFirstDir = "you can pass from here"

first directive controller :

controller: ['$scope','$attrs',function($scope,$attrs){
      console.log('controller');
      $scope.one = 'foo';

      this.fromFirstDir = "you can pass from here"
    }],
  }

Then using the require attribute in the secondDirective for first directive controller,you can access this dynamic attribute from link function of the secondDirective directive using controller passed to link function. Finally assign those attributes to local scope passed to link function.

app.directive('secondDirective',function(){
  return { 
    scope: {twoData : '@twoData'},
    require : '^firstDirective',
    template: function (element,attributes){
      console.log(attributes.two) //{{one}} not 'foo' or 'test'
      return 'Hello <b>{{fromFirstDir}}</b>'
    },
    link : function(scope,element,attr,firstDirCtrl){
      console.log("===",firstDirCtrl.fromFirstDir) 
      scope.fromFirstDir = firstDirCtrl.fromFirstDir;
    }
  }
});

In this way, those dynamic atributes are available to your second directive.

Here is the final fiddle.

Hope this will help you.