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

我有一个组件，我想把它动态地注入到我的html中

我有这样一个组件：

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

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

<p>TEST 1</p>

// 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);
        }
      );
    };
  });

test1.template.html

文件如下所示：

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

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

<p>TEST 1</p>

// 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);
        }
      );
    };
  });

但是标签不会出现。我试过在

ng bind html

字段上写literaly

“'hi！
”

，文本“hi！”显示在段落上，所以我认为这不是因为打字错误

我还尝试使用

$sce.trustAsHtml

，但它也不起作用：(

$scope.tag=$sce.trustAsHtml（“”）；

当我插入一个输入字段时，trustAsHtml方法确实起作用，但当我尝试动态注入组件时，它不允许我，请帮助D:

为什么

ng include

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

如何动态地包含组件？ 您将需要使用指令，这（感谢@Artem K.）易于遵循，但您也可以阅读，尽管这有点难以理解

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

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

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

<p>TEST 1</p>

// 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.所说，您必须理解angular的

$compile

，因此，感谢各位为我指出了正确的方向：）

不编译指令。为什么这么迂回？真的吗？天哪，那太可怕了！。。。我有一个组件库，用户可以将这些组件拖到一个地方，以便创建一个布局，将所有这些组件组合在一起。基本上，我想动态创建组件来实现这一点：（不难使用

$compile

，然后自己编译它们使用$compile教程