Question

我正在尝试创建一个可重用的模式对话框，我想在click指令本身上加载指令 template 。

function modalDialog() {
        var directive = {
            restrict: 'A',
            link: linkFunc,
            template: '<div class="modalBox--blur">' +
            '<div class="modalBox">' +
            '<h3>' {{title}} '</h3>' +
            '<h4>' {{text}} '</h4>' +
            '<button ng-click="answer(true)">Cancel</button>' +
            '<button ng-click="answer(false)">Ok</button>' +
            '</div>' +
            '</div>',
            scope: {
                title: '=dialogTitle',
                text: '=dialogTxt'
            },
            transclude: true
        };

        return directive;

        function linkFunc($scope, element, attrs) {

            element.on('click', function () {
                $scope.newEl = element.parent();
                $scope.newEl.append(...template Here...???);
            });
        }
    }

这是在视图中设置指令的方式：

<button
        modal-dialog
        dialog-title="modalBox.title"
        dialog-txt="modalBox.subText"
        type="button"
        ng-click="deleteSth()"
        class="button">
</button>

我无法弄清楚如何在元素点击上加载模板：

 element.on('click', function () {
    $scope.newEl = element.parent();
    $scope.newEl.append(template????);
 });

任何提示？提前谢谢！

Answer 1

您可以使用$templateCache获取模板与$templateCache.get('templateId.html')

一样

Answer 2

解决方案正在编译模板：

scope.modal = $compile(' <div class="modalBox--blur">' +
    '<div class="modalBox">' +
    '<h3>{{title}}</h3>' +
    '<h4>{{text}}</h4>' +
    '<button ng-click="dialogAnswer(true)">Annuleren</button>' +
    '<button ng-click="dialogAnswer(false)">Ok</button>' +
    '</div>' +
    '</div>')(scope);
element.on('click', function () {
    scope.newEl = element.parent();
    scope.newEl.append(scope.modal);

如何在点击时调用指令模板？

2 个答案: