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

Question

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

这是传递过来的 cookie 值(我现在已经对其进行了硬编码):

public usersCustoms = `<div class="mdl-grid"> 
                                <div id="firstrow" class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-grid" >
                                    <cit-recap > </cit-recap>
                                    <veh-ar-recap></veh-ar-recap>
                                    <new-models-inv></new-models-inv>
                                    <used-models-inv></used-models-inv>
                                </div>
                                <div id="secondrow" class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-grid">
                                    <deal-recap></deal-recap>
                                    <vehicle-inv></vehicle-inv>
                                    <acct-trend></acct-trend>
                                </div>
                                <div id="thirdrow" class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-grid">
                                    <parts-inv></parts-inv>
                                </div>
                            </div>`;

以下是指令，最后一个指令“usersCustomDirective”是应该引入其他指令的指令。

namespace DashboardDemo {
function citRecap(): ng.IDirective {
    return {
        templateUrl: 'ngDashboardDemo/Views/Directives/citrecap.html',
        restrict: 'AE',
        replace: true,
        controller: DashboardDemo.DashboardController,
        controllerAs: 'dc',
        link: function (scope, elem, attrs) {
        }
    }

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


function vehArRecap(): ng.IDirective {
    return {
        templateUrl: 'ngDashboardDemo/Views/Directives/vehArRecap.html',
        restrict: 'AE',
        replace: true,
        controller: DashboardDemo.DashboardController,
        controllerAs: 'dc',
        link: function (scope, elem, attrs) {
        }
    }

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

function newModelsInv(): ng.IDirective {
    return {
        templateUrl: 'ngDashboardDemo/Views/Directives/newModelsInv.html',
        restrict: 'AE',
        replace: true,
        controller: DashboardDemo.DashboardController,
        controllerAs: 'dc',
        link: function (scope, elem, attrs) {
        }
    }

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

function usedModelsInv(): ng.IDirective {
    return {
        templateUrl: 'ngDashboardDemo/Views/Directives/usedModelsInv.html',
        restrict: 'AE',
        replace: true,
        controller: DashboardDemo.DashboardController,
        controllerAs: 'dc',
        link: function (scope, elem, attrs) {
        }
    }

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



function dealRecap(): ng.IDirective {
    return {
        templateUrl: 'ngDashboardDemo/Views/Directives/dealRecap.html',
        restrict: 'AE',
        replace: true,
        controller: DashboardDemo.DashboardController,
        controllerAs: 'dc',
        link: function (scope, elem, attrs) {
        }
    }

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


function vehicleInv(): ng.IDirective {
    return {
        templateUrl: 'ngDashboardDemo/Views/Directives/vehicleInv.html',
        restrict: 'AE',
        replace: true,
        controller: DashboardDemo.DashboardController,
        controllerAs: 'dc',
        link: function (scope, elem, attrs) {
        }
    }

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


function acctTrend(): ng.IDirective {
    return {
        templateUrl: 'ngDashboardDemo/Views/Directives/acctngTrend.html',
        restrict: 'AE',
        replace: true,
        controller: DashboardDemo.DashboardController,
        controllerAs: 'dc',
        link: function (scope, elem, attrs) {
        }
    }

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

function partsInv(): ng.IDirective {
    return {
        templateUrl: 'ngDashboardDemo/Views/Directives/partsinv.html',
        restrict: 'AE',
        replace: true,
        controller: DashboardDemo.DashboardController,
        controllerAs: 'dc',
        link: function (scope, elem, attrs) {
        }
    }

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

function usersCustomDirective(): ng.IDirective {
    return {

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

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

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

}

这是我的 View HTML:

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

正如现在所写，我假设 html 不会显示，因为 html 无法识别我的自定义标签。我也尝试在链接函数中使用 elem.replaceAll 但得到了类似的结果。当我在 Chrome 中打开开发人员工具时，在元素下我会看到我的 div 和 div 内的自定义标签，但是，只有 div 被渲染，而自定义标签则没有渲染。控制台已记录传入的字符串值。我还尝试将“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

    }
}

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

Answer 1

好的，我知道我需要做什么了。经过进一步研究，我需要在该过程中包含 $compile 。我所做的更改是将 $compile 添加到指令函数调用中。然后我为模板分配了scope.userOptions 值。我在模板上调用了 $compile ，并在 viola angularjs magic 上调用了 $compile 。现在效果很好。希望这对其他人有帮助。仅供引用，如果您像我一样使用 typescript ，并且收到一条错误消息:“IScope 类型上不存在属性空白”，您需要创建自己的接口(interface)并扩展 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);