在单击事件后呈现模板指令- AngularJs

Question

我有一个指令，应该在单击模板指令中该图像的链接后显示该图像。当用户单击该图像时，我希望能够呈现模板。我怎样才能通过指令实现这一点呢？

指令用法：

<a href="img/img.jpg" gallery><img src="img/img.jpg"></a>

指令简化

app.directive('gallery', function() {

     return {
        scope: {},
        templateUrl: '/templates/gallery.html', // to Render after Click
        link: function(scope,el,attr) {

             el.click(function(e) {

                 e.preventDefault();
                 // How can I render here the template?
             });

        }
     }

});

Answer 1

您可以使用由作用域变量触发的ng-if指令，该变量在单击后更改。它不会在稍后执行渲染，我不确定这在没有大麻烦的情况下是可能的。

但是，它在性能上不需要成本，也不会添加包含元素，直到它被解析为真实。

link: function(scope,el,attr) {
    scope.templateState = false;
    el.click(function(e) {
         e.preventDefault();
         scope.templateState = true; // Change state
    });

}

以及模板(包含元素)：

<div ng-if="templateState"></div>

如果不清楚的话，我会尽量详细说明。