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

我正在使用AngularUI Bootstrap模式对话框（下面的示例）。一旦模板打开，我想触发一些jQuery事件。我正在使用modalInstance.opened方法，但获取空对象。AngularJS Modal（ui.bootstrap.modal）打开模式后无法触发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>

来源

2014-10-30 user2300875

的jsfiddle兴趣的人：http://jsfiddle.net/vugncsbt/1/ +1这是一个很好的问题。但是，如果我们知道您在做什么，也许我们可以建议一种解决方法？你需要表单来从jQuery中激发一个自定义事件吗？ – soktinpk 2014-10-30 20:44:15

我必须做一个像$（“＃myForm”）。validate（validationConfig）'这样的jQuery表单验证。由于我的应用程序的验证已经写入jQuery中，我必然会使用jQuery验证而不是angularJS验证 – user2300875 2014-10-30 20:56:26

我想既然模态内容transcluded打开事件触发，但还没有做出HTML提供给DOM。

0的简单超时会将其移到事件后面。

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

fiddle

来源

2014-10-30 20:34:02 Dylan

我正在使用此解决方案。正如soktinpk提到的有关添加自定义指令'emit-event-when-loaded'时的情况，但我想知道如果我们无法实现它在文档中所说的话，那么modalInstance.opened方法的用法是什么。 **打开 - 在下载内容模板并解析所有变量后打开模式时解决的承诺** – user2300875 2014-10-30 21:21:53

@ user2300875 *下载*，不必呈现内容。它不违反它的合同。必须解析变量并且内容必须准备好，但不一定附加到DOM。 – soktinpk 2014-10-30 22:22:18

这工作，但记得添加$超时作为依赖项 – mintedsky 2015-12-14 18:59:05

您可以创建自定义指令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-30 20:54:39 soktinpk

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

回答

相关问题