Question

我试图使用非凡的角度渲染github自述文件。与解析降价相关的一切都正常工作，但不幸的是产品所有者对应用程序有了更多的愿望。

他希望能够将YouTube视频和html表单放入自述文件中。我目前正在使用Youtube-embed directive制作的Brandly，但很遗憾，它不在我们的网页中呈现。

我使用的是一个将ng-bind-html与$sce.trustAsHtml结合使用的脚本，以便在页面中解析html。普通的HTML很好（形式标签和其他东西），但有角度的东西（例如youtube指令）不是。

我还注意到ng-click，ng-submit等角度指令不起作用。有没有人知道如何使用ng-bind-html在角度应用程序中解析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 example我遇到的问题，因为您可以看到它永远不会执行我在表单中添加的ng-submit。

~Archcry

Answer 1

使用角度站点中的example指令：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>

在ng-bind-html中渲染角度代码

1 个答案: