在自定义角指令，传递的innerHTML作为另一个指令属性 [英] In a custom Angular directive, pass the innerHTML as an attribute to another directive

问题描述

我试图采取一种角度指令的innerHTML，并传递作为另一个指令的属性。所以，让我们说，我有：

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>

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

是传递包含字符串变量的目标，这是一些文本为 code-的模式属性镜子指令。在大多数情况下，这似乎工作。我可以在元素看到出现一个指令，如下：

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>

不过，对于code-镜指令控制器不，在这一点上，初始化。

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

如果任何人都可以指出什么我做错了，或者有更好的办法完全做到这一点，那将是AP preciated。

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.

我的限制是：

• 我不能改变 code-镜指令。


• 我不能静态地操纵正在被发送到 JS code 指令的文本。

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

推荐答案

我已经改变了指令code到

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

下面是更新小提琴 http://jsfiddle.net/xw7ms0xd/2
这是第一次，我用$编译服务。得到这里的参考
的http://odeto$c$c.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx

这篇关于在自定义角指令，传递的innerHTML作为另一个指令属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！