如何使用ng-bind-html插入角度1.5组件

Question

我有一个组件，我想将它动态注入我的html。

我有这样的组件：

angular.module('test1', []);

angular.module('test1').component('test1', {
    templateUrl: 'components/test1/test1.template.html',
    controller: function test1Controller($scope) {
    }
});

test1.template.html文件如下所示：

<p>TEST 1</p>

在我的控制器上我有这个：

angular.module('myApp')
  .controller('ctrlCtrl', function ($scope, $sce) {
    $scope.tag = "<test1/>";
  });

在我的index.html上，我有这个：

<ng-bind-html ng-bind-html="tag"></ng-bind-html>

但标签不会显示。我曾尝试在"'<p>hi!</p>'"字段上写文字ng-bind-html，文字“嗨！”出现在一个段落上，所以我不认为这个错误是因为一个错字。

我也尝试使用$sce.trustAsHtml，但它既不起作用：（

$scope.tag = $sce.trustAsHtml("<test1/>");

当我插入一个输入字段时，trustAsHtml方法确实有效，但是当我尝试动态注入我的组件时，它就不会让我，请帮助D：

Answer 1

为什么ng-include无法工作？

组件需要编译才能在标记上使用它们。尝试使用浏览器中的开发人员工具编辑应用程序的html，通过在标记上人工注入您的组件：它不会起作用。

如何动态包含组件？

你需要使用指令，这个tutorial（感谢@Artem K.）很友好，但你也可以阅读angular's official documentation，这有点难尽管如此。

遵循angular官方文档的最后一个例子的逻辑，您可以创建一个指令来编译传递给它的所有内容，如下所示：

// source: https://docs.angularjs.org/api/ng/service/$compile
angular.module('myApp')
  .directive('my-compile', function ($compile) {
    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);
        }
      );
    };
  });

然后，在index.html上，您必须调用该指令，并将包含该组件标记的字符串作为参数发送。

<div compile="tag"></div>

正如@charlietfl和@Artem K.所说，你必须理解角度的$compile所以，谢谢你们指点我正确的方向:)