2

我正在使用 AngularUI Bootstrap 模式对话框（下面的示例）。打开模板后，我想触发一些 jQuery 事件。我正在使用 modalInstance.opened 方法，但得到空对象。

我的控制器.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);
   };
});

我的模板.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 回答