0

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

4

1 回答 1

4

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

<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

于 2013-10-18T18:25:00.257 回答