AngularJS：綁定事件偵聽器，使用jQuery，通過NG-重複

Question

生成的元素，我開始與AngularJS和我需要綁定「負荷」和「錯誤」事件I幀：

<ul data-ng-controller="WebServicesCtrl"> 
    <li data-ng-repeat="webservice in webservices"> 
     <a href="{{webservice.wsdl}}">{{webservice.name}}</a> 

     <iframe src="{{webservice.wsdl}}" class="hidden"></iframe> 

    </li> 
</ul> 

我試圖使用$scope.watch和$scope.apply沒有成功。我需要將事件綁定到iframe創建上，因爲它會自動加載給定的src。事情是這樣的：

app.controller('WebServicesCtrl', function WebServicesCtrl($scope, $http) { 

    $http.get('/webservices').success(function(data /* from expressjs, yaaay! */) { 

     $scope.webservices = data; 

     /* make iframes listen to load and error right after scope change, 
      before AngularJS inject them. */ 
    }); 

}); 

我MUST NOT使用<iframe onload="" onerror="" />。 我想知道jQuery的形式。 「純AngularJS」案也受到歡迎。只是不記得jQuery是不需要的。有時我們獲得了巨大的遺產，而且事情不可能很美。

我應該使用$injector或類似的東西嗎？那份文件太年輕了，很痛。感覺就像我不得不很快研究源代碼。

Answer 1

你最好的選擇是使用圍繞這兩個標籤的指令。

<a href="{{webservice.wsdl}}">{{webservice.name}}</a> 

<iframe src="{{webservice.wsdl}}" class="hidden"></iframe> 

定義是這樣的：

app.directive("aIframe", function() { 
    return { 
     template: '<div><a href="{{webservice.wsdl}}">{{webservice.name}}</a>' + 
       '<iframe src="{{webservice.wsdl}}" class="hidden"></iframe></div>', 
     restrict: 'A', 
     scope: { 
     webservice: '=webService' 
     }, 
     link: function(scope, element, attrs) { 
     $(element).find("iframe").on("load", function() { 
     //some code 
     }); 
     $(element).find("iframe").on("error", function() { 
     //some code 
     }); 
     } 
    }; 
}); 

使用鏈接功能是，將每個指令進行初始化時上運行它會運行範圍綁定從完成之後的優點ng-repeat範圍。

你的HTML現在將改變爲：

<ul data-ng-controller="WebServicesCtrl"> 
    <li data-ng-repeat="webservice in webservices"> 
     <div a-iframe web-service="webservice"></div> 
    </li> 
</ul> 

更多directives，它的參數，在這裏：AngularJS: Directives