点击事件后的渲染模板指令 - AngularJs

Render template directive after click event - AngularJs

本文关键字：指令 AngularJs 事件      更新时间：2023-09-26

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

指令用法：

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

您可以使用由作用域变量触发的 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>

如果不清楚，我会尝试详细说明。

相关文章：