Javascript 如何使用其他自定义指令中的元素标记作为另一个自定义指令的模板

我对angularjs比较陌生。我正在客户端使用angularjs创建一个web应用程序。我已经做了几个自定义指令，希望客户能够自定义他们每次登录时看到的指令。我试图做的是创建一个字符串，该字符串由用户选择的自定义指令标记填充。此信息将作为cookie值保存，并在用户登录时由控制器加载

这是传递的cookie值（我已经硬编码了）：

}

以下是我的视图HTML：

<main class="mdl-color--grey-100">
<users-custom-directive user-options ="{{dc.usersCustoms}}"></users-custom-directive></main>

---

它不显示html中的任何内容，而是显示我传递的文本字符串

好吧，我知道我需要做什么了。在进一步研究之后，我需要在这个过程中包含$compile。我所做的更改是将$compile添加到指令函数调用中。然后我给模板分配了scope.userOptions值。我在模板上调用$compile和viola angularjs magic。现在效果很好。希望这能帮助其他人。仅供参考，如果您使用的是typescript，如我所说，并且您收到一条错误信息：“类型IScope上不存在属性blank”，则需要创建自己的接口并扩展IScope以包含该属性

function usersCustomDirective($compile): ng.IDirective {
    return {

        link: function (scope: IMyScope, elem, attrs) {
            var template = scope.userOptions;
            var linkFn = $compile(template);
            var content = linkFn(scope);
            elem.append(content);

        },
        restrict: 'AEC',
        replace: true,
        controller: DashboardController,
        controllerAs: 'dc',
        scope: {
            userOptions: '@userOptions'
        },

    }
}
angular.module('DashboardDemo').directive('usersCustomDirective', usersCustomDirective);

---

好吧，我知道我需要做什么了。在进一步研究之后，我需要在这个过程中包含$compile。我所做的更改是将$compile添加到指令函数调用中。然后我给模板分配了scope.userOptions值。我在模板上调用$compile和viola angularjs magic。现在效果很好。希望这能帮助其他人。仅供参考，如果您使用的是typescript，如我所说，并且您收到一条错误信息：“类型IScope上不存在属性blank”，则需要创建自己的接口并扩展IScope以包含该属性

function usersCustomDirective($compile): ng.IDirective {
    return {

        link: function (scope: IMyScope, elem, attrs) {
            var template = scope.userOptions;
            var linkFn = $compile(template);
            var content = linkFn(scope);
            elem.append(content);

        },
        restrict: 'AEC',
        replace: true,
        controller: DashboardController,
        controllerAs: 'dc',
        scope: {
            userOptions: '@userOptions'
        },

    }
}
angular.module('DashboardDemo').directive('usersCustomDirective', usersCustomDirective);

function usersCustomDirective(): ng.IDirective {
    return {

        link: function (scope, elem, attrs) {
            //elem.html(scope.dc.usersCustoms);
            //console.log(scope.dc.usersCustoms);
            console.log(scope.userOptions);

        },
        restrict: 'AEC',
        replace: true,
        transclude: true,
        controller: DashboardController,
        controllerAs: 'dc',
        scope: {
            userOptions: '@userOptions'
        },
        template: scope.userOptions

    }
}

function usersCustomDirective($compile): ng.IDirective {
    return {

        link: function (scope: IMyScope, elem, attrs) {
            var template = scope.userOptions;
            var linkFn = $compile(template);
            var content = linkFn(scope);
            elem.append(content);

        },
        restrict: 'AEC',
        replace: true,
        controller: DashboardController,
        controllerAs: 'dc',
        scope: {
            userOptions: '@userOptions'
        },

    }
}
angular.module('DashboardDemo').directive('usersCustomDirective', usersCustomDirective);