Javascript 在另一个指令的链接函数中添加一个指令

我正在用AngularJS编写一整套Web控件。 现在，我创建了第一个基本指令a button，如下所示：

officeWebControls.directive('officeButton', ['$q', 'stylesheetInjectorService', function($q, stylesheetInjectorService) {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            isDefault: '@',
            isDisabled: '@',
            api: '=',
            label: '@'
        },
        template: OFFICE_BUTTON_TEMPLATE,

        /**
         * @description
         * Provides the controller for the 'officeButton' directive. In this controller all the required methods
         * are being stored.
         */
        controller: ['$scope', function($scope) {
}],

        /**
         * @kind                    Directive caller
         *
         * @param scope             The scope which is passed to the directive.
         * @param element           The element on which this directive is being applied.
         * @param attributes        The attributes that are applied on the element on which this directive is
         *                          applied.
         * @param controller        The controller for this directive.
         */
        link: function(scope, element, attributes, controller) {
        }
    };
}]);

请注意，为了便于阅读，删除了大部分代码

现在，我有另一个指令，它包含两个按钮，但是按钮的数量是通过作用域上的属性定义的

因此，我有以下指示：

officeWebControls.directive('officeMessageBox', ['$q', 'stylesheetInjectorService', function($q, stylesheetInjectorService) {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            title: '@',
            message: '@',
            messageBoxStyle: '@',
            messageBoxButtons: '@'
        },
        template: OFFICE_MESSAGE_BOX,

        /**
         * @description
         * Provides the controller for the 'officeButton' directive. In this controller all the required methods
         * are being stored.
         */
        controller: ['$scope', function($scope) {

}],

/**
*@kind指令调用方
*
*@param scope传递给指令的范围。
*@param元素应用此指令的元素。
*@param attributes应用于执行此指令的元素的属性
*应用。
*@param controller此指令的控制器。
*/
链接：功能（范围、元素、属性、控制器）{
//添加定义按钮样式的正确图像。
$（messageBoxStyleContainerElement）.append（messageBoxStyleElement）；
var messageBoxButtonsElement=''；
var messageboxbuttonsconterelement=$（'.messageboxbuttons容器'，元素）；
//根据范围进行必要的调整。
开关（scope.messageBoxButtons）{
案例“messageBoxButtons.Ok”：
messageBoxButtonsElement=''；
打破
案例“messageBoxButtons.OkCancel”：
messageBoxButtonsElement=''；
messageBoxButtonsElement+=''；
打破
案例“messageBoxButtons.YesNo”：
messageBoxButtonsElement=''；
messageBoxButtonsElement+=''；
打破
案例“messageBoxButtons.YesNoCancel”：
messageBoxButtonsElement=''；
messageBoxButtonsElement+=''；
messageBoxButtonsElement+=''；
打破
}
$（messageBoxButtonsContainerElement）.append（messageBoxButtonsElement）；
}
};
}]);

因此，在link函数中，我添加了一个元素

数据办公室按钮

，它实际上是一个指令。 现在，问题是该指令没有被编译，dataoffice按钮没有被正确的HTML（如第一个模板中定义的）替换

你知道怎样才能做到吗

---

您可能正在使用

$

解析messageBoxButtonsElement。请尝试使用

angular.element

---

或者，使用

模板

并将开关/机箱逻辑编码为一系列

ng if

语句

我尝试了一些方法，似乎我必须使用angular.element，所以我接受这个答案。请记住，

$compile（messageBoxButtonsElement）（范围）来确保它被编译。
        /**
         * @kind                    Directive caller
         *
         * @param scope             The scope which is passed to the directive.
         * @param element           The element on which this directive is being applied.
         * @param attributes        The attributes that are applied on the element on which this directive is
         *                          applied.
         * @param controller        The controller for this directive.
         */
        link: function (scope, element, attributes, controller) {
            // Adds the correct image that defines the style of the button.
            $(messageBoxStyleContainerElement).append(messageBoxStyleElement);

            var messageBoxButtonsElement = '';
            var messageBoxButtonsContainerElement = $('.messageBox-buttons-container', element);

            // Make the necessary adaptations based on the scope.
            switch (scope.messageBoxButtons) {
                case 'messageBoxButtons.Ok':
                    messageBoxButtonsElement = '<data-office-button label="Ok"></data-office-button>';
                    break;
                case 'messageBoxButtons.OkCancel':
                    messageBoxButtonsElement = '<data-office-button label="Ok"></data-office-button>';
                    messageBoxButtonsElement += '<data-office-button label="Cancel"></data-office-button>';
                    break;
                case 'messageBoxButtons.YesNo':
                    messageBoxButtonsElement = '<data-office-button label="Yes"></data-office-button>';
                    messageBoxButtonsElement += '<data-office-button label="No"></data-office-button>';
                    break;
                case 'messageBoxButtons.YesNoCancel':
                    messageBoxButtonsElement = '<data-office-button label="Yes"></data-office-button>';
                    messageBoxButtonsElement += '<data-office-button label="No"></data-office-button>';
                    messageBoxButtonsElement += '<data-office-button label="Cancel"></data-office-button>';
                    break;
            }

            $(messageBoxButtonsContainerElement).append(messageBoxButtonsElement);
        }
    };
}]);