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

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

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

有什么建议吗？

---

提前谢谢你

您可以使用

---

像

$templateCache.get（'templateId.html'）

解决方案正在编译模板：

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

scope.modal=$compile（“”+
'' +
“{{title}}”+
“{{text}}”+
“环形人”+
“好的”+
'' +
“（范围）；
元素上（'单击'，函数（）{
scope.newEl=element.parent（）；
scope.newEl.append（scope.modal）；

这几乎可以满足我的要求，但我不能绑定范围变量（标题、文本）…我想你不能用$templateCache绑定范围变量。你是什么意思？你的意思是模板中有一些var绑定？然后你需要一个插值，

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

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