在Angular中呈现DOM对象时，如何调用控制器中指定的函数

How do I call a function specified in a controller when a DOM object has been rendered in Angular?

本文关键字：调用 控制器 函数 Angular DOM 对象 何调用      更新时间：2023-09-26

我有一个模式，我希望在指定URL参数时显示它（例如，url.com/?showmodal=1。如何在呈现div后调用launchModalIfParameter？下面包括一些摘录。

Core.js

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
}

Widget.html（使用Bootstrap的模式对话框）

<div class="modal fade" id="createSupportTicket" role="dialog" aria-hidden="true">
</div>

小工具.js

$scope.launchModalIfParameter = function () {
     if ($('#createSupportTicket').length) {
         alert('Found with Length');
     }
     if (getUrlParameter('ticket') == 1) {
         $('#createSupportTicket').modal('show');
         console.log("Shown activated");
     }
}

使用自定义指令很容易做到这一点。

本质上，您创建了一个自定义指令，并且在链接函数（在编译模态、数据绑定等之后运行）中，您可以根据一些标准显示模态。

就这么简单：

link: function(scope, element, attrs) {
                if (getUrlParameter('ticket') == 1) {
                     $(element).modal('show');
                 }
            }

Fiddle在这里对此进行了说明：http://jsfiddle.net/gtxdLcb8/

这样做的另一个好处是，您可以在作用域（在链接函数中）上添加$watch-avariable，并在变量发生变化时自动显示或隐藏模态。

相关文章：