0

外部モジュール を使用して、ネストされたディレクティブを使用して、コード形式のブロックに含まれる AngularJS ディレクティブangular-ui-codemirrorを表示しようとしています。$element.html()ui-codemirror

私がこれを行う必要がある理由を知りたい場合は、こちらをご覧ください。

静的テキストでこれを行う方法を例から簡単に確認できます。そしてinnerHTML、囲んでいるディレクティブの を問題なく渡すことができます。ui-codemirror後でディレクティブにコンパイルされないだけです。

ここで、これを行うにはおそらくサービスを使用する必要があることがわかります$compileが、その例をこの状況に適応させることはできません。

AngularJS コードの例を次に示します。

angular.module('articles', ['ui.codemirror']).directive('jsCode', function($compile) {
  return {
    restrict: 'E',
    link: function($scope, $element) {    
      $scope.codeText = $element.html();
      var template = '<div ' +
          'ui-codemirror="{ ' +
            'lineNumbers: true, ' +
            'theme:\'twilight\', ' +
            'readOnly: \'nocursor\', ' +
            'lineWrapping: true, ' +
            'mode: \'xml\'}" ' +
          'ng-bind="codeText"></div>';
      var linkFn = $compile(template);
      var content = linkFn($scope);
      $element.replaceWith(content)
    }
  };
});

そしてhtml：

<js-code>
&lt;html style=&quot;color: green&quot;&gt;
&lt;!-- this is a comment --&gt;
&lt;head&gt;
&lt;title&gt;HTML Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what
I mean&amp;quot;&lt;/em&gt;... but might not match your style.
&lt;/body&gt;
&lt;/html&gt;
</js-code>

私のジレンマを説明するために、このプランカーを作成しました。最初のブロックはフォーマットされていません。2 番目のブロック (静的) がフォーマットされます。

4

1 に答える 1

0

jsCode ディレクティブで置き換える

'ng-bind="codeText"></div>';

に

'ng-model="codeText"></div>';

と使用

$element.text()

それ以外の

$element.html()
于 2016-09-20T18:07:13.410 に答える