Question

我在AngularJS中编写了一整套Web控件。现在，我已经创建了第一个基本指令按钮，如下所示：

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

}]，

data-office-button

所以，在链接功能中我添加了一个元素{{1}}，它实际上是一个指令。现在，问题是该指令未编译，数据办公室按钮未被正确的HTML替换（如第一个模板中定义的那样）。

关于如何实现这一点的任何想法？

亲切的问候

Answer 1

您可能正在使用$来解析messageBoxButtonsElement。请改为angular.element。

或者，使用template并将您的switch / case逻辑编码为一系列ng-if语句。

在另一个指令的link函数中添加一个指令

1 个答案: