2

AngularUI Bootstrap モーダル ダイアログを使用しています (以下の例)。テンプレートが開いたら、jQuery イベントをトリガーしたいと思います。modalInstance.opened メソッドを使用していますが、空のオブジェクトを取得しています。

mycontroller.js

var app = angular.module('ui.bootstrap.demo');
 app.controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];
  $scope.open = function (size) {

    var modalInstance = $modal.open({
     templateUrl: 'mytemplate.html',
     controller: 'ModalInstanceCtrl',
     size: size,
     resolve: {
        items: function () {
          return $scope.items;
        }
    }
   });

   modalInstance.result.then(function (selectedItem) {
    // form submit. Works fine.
   });

   modalInstance.opened.then(function (selectedItem) {
    // I want to trigger jQuery event on form element
    // When I try to access $("form") I am getting empty object
   });
 }
});

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
   $scope.form = {
     name : "Default Name"
     myItem : items[0]
   }
   $scope.ok = function () {
     $modalInstance.close($scope.form);
   };
});

mytemplate.html

<form>
  <label>Name</label>
  <input type="text" name="name" ng-bind="form.name" />
  ...
</form>
4

2 に答える 2

2

モーダル コンテンツはトランスクルージョンされているため、open イベントが発生しますが、その html が dom で利用できるようになっていないと思います。

0 の単純なタイムアウトは、イベントの背後に移動します。

   $timeout ( function(){
        console.log(angular.element("form"));
    },0);

フィドル

于 2014-10-30T20:34:02.727 に答える
1

カスタム ディレクティブを作成emit-event-when-loadedしてフォームに添付できます

例：

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
    $scope.form = {
        name: "Default Name",
        myItem: items[0]
    }
    $scope.ok = function () {
        $modalInstance.close($scope.form);
    };
}).directive("emitEventWhenLoaded", function() {
    return function() {
        console.log($("form")); // $("form") is defined
        angular.element("form").trigger("custom-event"); // do whatever you want
    }
});

次にHTMLで：

<form emit-event-when-loaded>
<label>Name</label>
<input type="text" name="name" ng-bind="form.name" />

更新されたフィドル: http://jsfiddle.net/vugncsbt/3/

于 2014-10-30T20:54:39.803 に答える