如何调用指令模板上的点击？ [英] How to call directive template on click?

问题描述

我试图做一个可重复使用模式对话框，我想加载指令的模板上点击指令本身的..

I am trying to make a reusable modal dialog and I would like to load directive template on click directive itself..

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...???);
            });
        }
    }

这是指令是如何在视图设置：

This is how directive is set in the view:

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

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

I can't figure out how to load template on element click :

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

任何提示吗？
谢谢你在前进！

Any tips? Thank you in advance!

推荐答案

解决方案被编译模板：

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

这篇关于如何调用指令模板上的点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！