AngularJS Modal (ui.bootstrap.modal)이 모달을 연 후 jQuery 이벤트를 트리거 할 수 없습니다 (modalInstance.opened)

Question

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> 

Answer 1

모달 내용이 공개 이벤트가 발생 매개자되지만 사용할 수 HTML 것을 만들어지지 않았기 때문에 나는 생각한다 dom.

0 초의 간단한 시간 초과는 이벤트 뒤로 이동합니다.

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

fiddle

Answer 2

사용자 지정 지침 emit-event-when-loaded을 작성하고 양식에 첨부 할 수

예 : HTML에서 그런

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 
    } 
}); 

:

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

,

업데이트 바이올린 :에 관심있는 사람들을위한 http://jsfiddle.net/vugncsbt/3/