jquery - 使用angular js在li标签中添加标题

Question

我正在使用第三方控件，该控件生成包含 <div> 标记的 <li>。

现在我正在尝试提供 title 属性，以便在 <li> 标签上使用悬停时用户可以看到工具提示。

下面是代码片段。

<div id="drpDashboard_popup" class="e-ddl-popup" >
    <ul class="e-ul" role="listbox">
        <li id="00000000-0000-0000-0000-000000000000" role="option" class="e-hover">New Dashboard</li>
        <li id="4ca2885b-1896-c0cf-24d3-08d24a2f5c7e" role="option" class="e-active">Another Dahsboard</li>
        <li id="4f99c665-b339-c99e-2038-08d26599a807" role="option" class="">DashboardSave</li>
        <li id="521ed554-5d6f-c3b9-9e83-08d24a2f456b" role="option" class="">First Dashboard</li>
        <li id="7d99d618-458f-cee5-07d9-08d25c41c8a1" role="option" class="">FiveCharts</li>
        <li id="43ee8bd7-c1b1-c179-4e2d-08d25c40855a" role="option" class="">ThreeChartsDB</li>
        <li id="a18c47fb-e097-cd77-66f3-08d24a2f867e" role="option" >Windows - Peak page File DB</li>
    </ul>
</div>

我有 jquery 在 <li> 标签中添加标题。请引用下面的 jquery 代码。

$(function () {
    $(".e-ddl-popup").find("li").each(function () {
        $(this).mouseover(function () {
            $(this).attr('title', $(this).html());
        });
    });
});

但我想用angular js做。 angular 中有 ng-mouseover，但我不知道如何在我的代码中使用它，因为列表是由第三方自定义控件动态生成的。

Answer 1

您可以使用 jquery 动态事件绑定(bind)编写一个执行添加标题的指令(参见 https://api.jquery.com/on/#on-events-selector-data-handler)。因此，您必须将您的组件放在一个不会动态创建的元素中(例如一个简单的 div)，然后将您的指令应用于它:

<div component-container>
    <!-- put your component here -->
</div>

那么你改变标题的指令如下:

app.directive("componentContainer", [function () {
        return {
            restrict: "C",
            link: function (scope, iElement, iAttrs) {
                $(iElement).on('mouseover', 'li', function () {
                    $(this).attr('title', $(this).html());
                });
            }
        };
    }]);