3

我正在尝试使用显着和角度来渲染 github 自述文件。与解析降价相关的一切工作正常，但不幸的是，产品所有者对应用程序有更多的希望。

他希望能够将 youtube 视频和 html 表单放入自述文件中。我目前正在使用Brandly制作的Youtube-embed 指令，但不幸的是它没有呈现在我们的页面中。

我正在使用一个脚本，它ng-bind-html结合使用$sce.trustAsHtml来解析页面中的 html。正常的 HTML 可以很好地拾取（表单标签和其他东西），但有角度的东西（例如 youtube 指令）不是。

我还注意到诸如ng-click,ng-submit等的角度指令不起作用。有谁知道如何在 html 中使用 angular 应用程序解析 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我在表单中添加的内容。

~ Archcry

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 回答