3

私はgithubのreadmeを驚くほど角度のあるものを使ってレンダリングしようとしています。マークダウンの解析に関連するものはすべて適切に機能していますが、残念ながら、製品所有者はアプリケーションに対してさらにいくつかの要望を持っています.

彼は、YouTube のビデオと HTML フォームを readme に入れられるようにしたいと考えています。私は現在、 Brandlyによって作成されたYoutube-embed ディレクティブを使用していますが、残念ながら私たちのページではレンダリングされません。

ページ内の html を解析するために とng-bind-html組み合わせて使用​​するスクリプトを使用しています。$sce.trustAsHtml通常の HTML (フォーム タグやその他のもの) は問題なく取得されますが、角度のあるもの (例として youtube ディレクティブ) は取得されません。

ng-clickなどの角度ディレクティブが機能していないことにも気付きng-submitました。を使用してAngularアプリケーション内で解析されているhtmlでAngularを機能させる方法を知っている人はいますng-bind-htmlか?

以下は、HTML がテンプレートに解析される方法のコード例です。

JS:

case 'markdown':
    $scope.fileContent = $sce.trustAsHtml(remarkable.render(content));
break;

HTML:

<pre class="fileContent"><code ng-bind-html="fileContent"></code></pre>

私が抱えている問題にPlunker の例ng-submitを追加しました。フォームに追加した .

〜アーチクライ

4

1 に答える 1

3

angular サイトのサンプル ディレクティブを使用します: https://docs.angularjs.org/api/ng/service/ $compile

angular.module('compileExample', [], function($compileProvider) {
    // configure new 'compile' directive by passing a directive
    // factory function. The factory function injects the '$compile'
    $compileProvider.directive('compile', function($compile) {
      // directive factory creates a link function
      return function(scope, element, attrs) {
        scope.$watch(
          function(scope) {
             // watch the 'compile' expression for changes
            return scope.$eval(attrs.compile);
          },
          function(value) {
            // when the 'compile' expression changes
            // assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current
            // scope.
            // NOTE: we only compile .childNodes so that
            // we don't get into infinite loop compiling ourselves
            $compile(element.contents())(scope);
          }
        );
      };
    });
  })
  .controller('GreeterController', ['$scope', function($scope) {
    $scope.name = 'Angular';
    $scope.html = 'Hello {{name}}';
  }]);

その後、次のように使用できます

<p compile="fileContent"></p>
于 2014-12-15T09:26:41.543 に答える