AngularJS:使用 jQuery 将事件侦听器绑定到 ng-repeat 生成的元素

AngularJS: Bind event listener, using jQuery, to elements generated by ng-repeat

本文关键字：ng-repeat 元素 绑定 侦听器 使用 jQuery 事件 AngularJS      更新时间：2023-09-26

我从AngularJS开始，我需要将"load"和"error"事件绑定到iframes：

<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或类似的东西吗？那份文件太年轻了，太伤人了。感觉我很快就要研究源代码了。

最好的选择是使用环绕这两个标签的指令。

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

使用 link 函数的优点是，它将在每次初始化指令时运行，并在从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： 指令

相关文章：