In a custom Angular directive, pass the innerHTML as an attribute to another directive

Question

I am trying to take the innerHTML of an Angular directive, and pass that as an attribute of another directive. So, let's say that I have:

<js-code>This is some text</js-code>

my jsCode directive looks like this:

prettifyModule.directive('jsCode', function() {
  return {
    restrict: 'E',
    compile: function($element, $scope) {
      $scope.codeText = $element.html();
      $element.replaceWith("<code-mirror model='codeText'></code-mirror>");
    }
  };
});

The goal being to pass a variable containing the string, "This is some text" as the model attribute of the code-mirror directive. For the most part, this seems to work. I can see in the elements that a directive appears that looks like:

<code-mirror model='codeText'></code-mirror>

However, the controller for the code-mirror directive does not, at that point, initialize.

If anyone could point out what I am doing wrong, or if there is a better way to do this entirely, it would be appreciated.

My limitations are:

• I cannot alter the code-mirror directive.
• I cannot statically manipulate the text that is being sent to the jsCode directive.

Answer 1

I have changed the directive code to

myApp.directive('myDirective', function($compile) {
return {
restrict: 'E',
link: function($scope, $element){
        $scope.codeText = $element.html();
      var template = "<second-directive model='codeText'></second-directive>";
      var linkFn = $compile(template);
      var content = linkFn($scope);
      $element.replaceWith(content);
},
controller: function($scope) {
  $scope.test = "Text from controller";
}
};
});

Here is the updated fiddle http://jsfiddle.net/xw7ms0xd/2 This is the first time, I used $compile service. Got the reference from here http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx