將事件處理程序添加到$資源獲取後創建的DOM元素（AngularJS）

我很難啓用引導程序的popover組件到我的dom元素。

我正在使用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>

在我的模板控制器，我從第三方獲取API的手機數據比其注入到範圍變量「手機」，像這樣：

phoneControllers.controller('PhoneListCtrl', ['$scope', 'Phones', 
    function ($scope, Cards) { 
     // Phones is the service that queries the phone data to the API 
     Phones.query(function(data){ 
      // Got a response, add received to the phones variable 
      $scope.phones = data; 
      // for each .card_image element,give it the popover property 
      $('.phone_image').popover({ 
       'trigger': 'hover' 
      }); 
     }); 
    }] 
);

我的問題在於$('.phone_image').popover細分市場。我的想法是，通過在查詢的回調函數中執行它，它將起作用，因爲那是在創建「.phone_image」元素的時候。但事實並非如此。

我似乎無法完全理解我應該在什麼範圍內分配.popover屬性。我知道它是有效的，因爲如果我在開發人員工具控制檯上執行此操作，所有頁面內容加載完畢後，它都能正常工作。我只是不知道在我的代碼中該從哪裏調用它。

在此先感謝

來源

2015-04-30 Paraphiliac Ostrich

這是因爲你正在操縱控制器內的DOM。你不應該這樣做，爲documentation說：

不要使用控制器：

操作DOM - 控制器應該只包含業務邏輯。將任何表示邏輯放入控制器中會嚴重影響其可測試性。 Angular對大多數情況和指令進行了數據綁定，以封裝手動DOM操作。

換句話說，當您使用Angular控制器時，您只需通過$ scope databinding將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}}">

來源

2015-04-30 15:31:59

將事件處理程序添加到$資源獲取後創建的DOM元素（AngularJS）

回答

相關問題