Question

我有几篇关于此的文章，但没有为我的问题找到合适的解决方案。我正在使用Angular js 1.5和Bootstrap 3.

我的代码就像，

<a href="" class="noUnderline" data-trigger="focus" data-toggle="popover"  data-placement="bottom" data-content = "{{helpSrv.helpMessage}}" > 
 <i class="fa fa-info-circle infoCirc" ng-click="helpSrv.showPopOverInfo($event)" id="forecastAttainmentId"> </i>
</a>

我想在点击i图标时显示Popover。现在，helpSrv是一个用Angular JS编写的服务。 helpMessage由元素的id选择。 helpSrv是一项包含两件事的服务，例如

var s = this
s.helpInfo = {
"forecastAttainmentId": "Some text"
}
s.showPopOverInfo = function (event) {      
        var helpSelect = event.target.id
        s.helpMessage = s.helpInfo[helpSelect]
        console.log(s.helpMessage)
}

现在，当我第一次点击i图标时，它会在弹出框中显示{{helpSrv.helpMessage}}。下次显示实际消息，即Some text。我认为延迟是由函数调用引起的。怎么解决？或者有没有办法使用angular（没有任何插件）自动获取元素的id，以便我可以使用data-content="{{helpSrv.helpInfo['id of the element']}}"来获取Popover的消息。

Answer 1

您可以使用jQuery通过i访问$("#forecastAttainmentId").click(function(){...}标记。此外，您需要初始化helpSrv.helpMessage以便能够在首次加载弹出窗口时查看数据。

Answer 2

关于AngularJs digest cycle。尝试使用$ timeout：

s.showPopOverInfo = function (event) {     
    $timeout(function(){ 
        var helpSelect = event.target.id; // Always end lines with a semicolon
        s.helpMessage = s.helpInfo[helpSelect];
        console.log(s.helpMessage);
    }, 0);
};

如何通过Angular js获取元素的id

2 个答案: