I have a simple web page with button that opens a jQuery dialog:
$("#openDialog").click(function(e) {
openMyDialog();
});
function openMyDialog() {
$( "#dialog" ).dialog({
modal: true
});
}
Now, the #dialog contains angular application:
<div id="dialog" ng-app="my-app"><my-directive></mydirective</div>
That angular app is written with Typescript. Application has a svg element that contains a button which opens another dialog. That dialog has two input fields in it and when values are inserted the svg image on the background updates accordingly.
This all works just fine when I use angular app independently but when it opens in a jquery dialog, I cannot get focus to the 2nd dialog input fields. Developer tools shows the input field as:
<input type="text" name="minValue" ng-model="range.minValue" ng-value="range.minValue" size="2" class="value-range-element ng-pristine ng-valid ng-touched">
The second dialog is created like this:
showValueRangeModal(valueRange: ValueRange, templatePath: string) {
var modalInstance = this.modalService.open(
{
templateUrl: templatePath + 'modals/valueRange.html',
windowClass: 'my-modal-container',
controller: MyApp.Controllers.ValueRangeModalController,
resolve: {
range: () => valueRange
}
});
modalInstance.result.then(range => {
valueRange = range;
});
}
I've tried this https://stackoverflow.com/a/26036102/2090125 without any luck.
EDIT: Here's the controller (not much to see here):
module MyApp.Controllers {
'use strict';
import ValueRange = MyApp.Models.DrawingModel.ValueRange;
export class ValueRangeModalController {
static $inject = ['$scope', '$modalInstance', 'range'];
constructor($scope, $modalInstance: ng.ui.bootstrap.IModalServiceInstance, range: ValueRange) {
$scope.range = range;
$scope.save = () => {
$modalInstance.close($scope.range);
}
$scope.cancel = () => {
$modalInstance.dismiss();
}
}
}
Basically the DOM is like this (when both dialogs are open):
<body>
<button id="openDialog">open</button>
<div class="ui-dialog ui-widget etc...">
<div class="ui-dialog-titlebar ..."></div>
<div id="dialog" ng-app="my-app" class="...">Here is the ng-app contents</div>
</div>
<div modal-render="true" role="dialog" class="modal ...">
<div class="modal-dialog">
<div class="modal-content" modal-transclude>
<div id="value-rante-modal-container">
Contents of the 2nd dialog with input fields
</div>
</div>
</div>
</div>
</body>
autofocusattr on the input? or you mean you can't click it?