Angular 1.6.x：如何从当前组件渲染组件标签至HTML

嘿，这个问题我之前也碰到过！AngularJS 1.6里用ng-bind-html直接输出组件标签字符串没用，核心原因是它只会把字符串转换成普通DOM元素，不会触发Angular的组件编译流程——组件标签需要被$compile服务处理后，才能被识别并实例化出对应的组件实例。

给你两个实用的解决方案，按需选择：

方案一：在控制器里用$compile手动编译组件 #

这种方式适合需要在控制器里动态生成组件的场景：

1. 确保控制器注入$compile服务
2. 定位到要插入组件的容器元素，编译组件标签后插入进去

// 你的控制器代码
app.controller('YourTargetController', ['$scope', '$compile', function($scope, $compile) {
    // 定位页面上的组件容器（给容器加个id方便查找）
    const componentContainer = angular.element(document.getElementById('component-host'));
    
    // 编译组件标签并绑定到当前scope
    const compiledComponent = $compile('<complaint-create-component></complaint-create-component>')($scope);
    
    // 清空容器并插入编译好的组件
    componentContainer.empty().append(compiledComponent);
}]);

对应的HTML只需要放一个容器：

<div id="component-host"></div>

方案二：写一个自定义指令动态加载组件 #

这种方式更符合Angular的指令化思想，复用性更强：

先定义一个指令：

app.directive('dynamicComponent', ['$compile', function($compile) {
    return {
        scope: {
            // 接收组件的短横线格式标签名
            componentTag: '@'
        },
        link: function(scope, element) {
            // 拼接组件标签字符串
            const componentHtml = `<${scope.componentTag}></${scope.componentTag}>`;
            // 编译时绑定到父scope（避免隔离scope影响组件逻辑）
            const compiledElement = $compile(componentHtml)(scope.$parent);
            // 插入到指令所在的元素中
            element.append(compiledElement);
        }
    };
}]);

然后在HTML里直接使用这个指令，还支持动态切换组件：

<!-- 静态指定组件 -->
<dynamic-component component-tag="complaint-create-component"></dynamic-component>

<!-- 动态切换组件（比如$scope.currentComponent = "complaint-create-component"） -->
<dynamic-component component-tag="{{currentComponent}}"></dynamic-component>

补充：为什么ng-bind-html不行？ #

简单来说，ng-bind-html的核心是安全解析HTML字符串为DOM，但它完全不会触发Angular的编译链路——组件的初始化、scope绑定、模板渲染这些关键步骤，都需要$compile服务来驱动，ng-bind-html没碰这部分逻辑，所以组件标签只会被当成普通HTML显示，不会变成真正的Angular组件。

另外要确认你的complaint-create-component已经正确注册（比如用app.component('complaintCreateComponent', { ... })），你直接写标签能正常工作，这部分应该没问题～

内容的提问来源于stack exchange，提问作者aby km