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”作为model指令的code-mirror属性。在大多数情况下，这似乎有效。我可以在元素中看到指令看起来像：

<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

在自定义Angular指令中，将innerHTML作为属性传递给另一个指令

1 个答案: