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

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

Answer 1

您可以编写一个使用jquery动态事件绑定执行添加标题的指令（请参阅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());
                });
            }
        };
    }]);

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

1 个答案: