在自定義Angular指令中，將innerHTML作為屬性傳遞給另一個指令

Question

我正在嘗試采用Angular指令的innerHTML，並將其作為另一個指令的屬性傳遞。 因此，假設我有：

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

我的jsCode指令如下所示：

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

目標是傳遞包含字符串“ This is some text”的變量作為code-mirror指令的model屬性。 在大多數情況下，這似乎可行。 我可以在元素中看到偽指令看起來像：

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

但是，此時代碼鏡像指令的控制器未初始化。

如果有人指出我做錯了什么，或者有更好的方法可以完全做到這一點，將不勝感激。

我的限制是：

• 我無法更改code-mirror指令。
• 我無法靜態地處理發送到jsCode指令的文本。

Answer 1

我已將指令代碼更改為

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";
}
};
});

這是更新的小提琴http://jsfiddle.net/xw7ms0xd/2這是我第一次使用$ compile服務。 從這里獲得參考http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx