Question

我从AngularJS开始，我需要将“加载”和“错误”事件绑定到iframe：

<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

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

1 个答案: