将事件处理程序添加到$resource get（AngularJS）之后创建的DOM元素

我很难在dom元素中启用Bootstrap的popover组件

我正在使用AngularJS，在我的模板上，我正在使用ng repeat指令创建一个库

<div ng-repeat="phone in phones" >
    <a class="thumb" href="#/phones/{{phone.id}}">
        <img class="img-responsive phone_image" ng-src="{{phone.image_path}}" data-content="{{phone.text}}" rel="popover" data-placement="right" data-trigger="hover">
    </a>
</div>

我的问题在于

$（'.phone_image'）.popover

段。我的想法是，通过在查询的回调函数中执行该操作，它将起作用，因为此时会创建“.phone_image”元素。但事实并非如此

我似乎无法准确理解应该在什么范围内分配

.popover

属性。我知道它是有效的，因为如果我在开发人员工具控制台上执行此操作，在加载所有页面内容后，它会正常工作。我只是不知道在我的代码中从哪里开始调用它

---

提前感谢

这是因为您正在控制器内操作DOM。你不应该这样做，就像上面说的：

不要使用控制器来：

操纵DOM-控制器应仅包含业务逻辑。将任何表示逻辑放入控制器都会显著影响其可测试性。Angular在大多数情况下都有数据绑定，并有封装手动DOM操作的指令

换句话说，当您使用Angular控制器时，您只是通过$scope数据绑定将DOM操作委托给Angular

如果您想操纵DOM，应该依赖于指令。在您的情况下，您可以创建一个phonePopover指令，如下所示：

angular
    .module('phone', [])
    .directive('phonePopover', function() {
        return {
            restrict: 'A',
            replace: false,
            scope: {
                phoneText: '=phonePopover'
            },
            link: function(scope, element, attr) {
                element.popover({
                    'trigger': 'hover',
                    'placement': 'right',
                    'content': scope.phoneText
                });
            }
    });

并将其应用于元素，如下所示：

<img data-phone-popover="{{phone.text}}" class="img-responsive phone_image" ng-src="{{phone.image_path}}">

<img data-phone-popover="{{phone.text}}" class="img-responsive phone_image" ng-src="{{phone.image_path}}">