AngularJS模式（ui.bootstrap.Modal）在打开模式（modalInstance.opened）后无法触发jQuery事件

我正在使用AngularUI引导模式对话框（下面的示例）。打开模板后，我想触发一些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>

名称
...

我认为，由于模式内容被排除在外，因此打开的事件会触发，但没有使该html可用于dom

0秒的简单超时将使其移到事件后面

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

---

您可以在加载时创建自定义指令

发出事件

，并将其附加到表单中

例如：

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" />

名称

---

更新的提琴：

JSFiddle供感兴趣的人使用：+1这是一个好问题。然而，如果我们知道你在做什么，也许我们可以建议一个解决办法？您需要表单来从jQuery触发自定义事件吗？我必须执行jQuery表单验证，比如

$（“#myForm”）.validate（validationConfig）

。由于我的应用程序的验证已经用jQuery编写，我必须使用jQuery验证，而不是angularJS验证。我将使用这个解决方案。正如soktinpk提到的在加载时添加自定义指令

emit event

，但我想知道如果我们无法实现文档中所述的功能，那么modalInstance.opened方法有何用处。opened—在下载内容模板并解析所有内容后打开模式时解析的承诺variables@user2300875下载，不一定呈现内容。它没有违反合同。变量必须解析，内容必须准备好，但不一定要附加到DOM中