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指定され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

最良のオプションは、これら 2 つのタグをラップするディレクティブを使用することです。

<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: ディレクティブ

于 2013-10-18T18:25:00.257 に答える