Javascript jQuery对话框中的Typescript AngularJS应用程序无法获得第二个对话框的焦点_Javascript_Jquery_Angularjs_Typescript

Javascript jQuery对话框中的Typescript AngularJS应用程序无法获得第二个对话框的焦点

javascript jquery angularjs typescript

Javascript jQuery对话框中的Typescript AngularJS应用程序无法获得第二个对话框的焦点,javascript,jquery,angularjs,typescript,Javascript,Jquery,Angularjs,Typescript,我有一个简单的网页，带有打开jQuery对话框的按钮：现在，该对话框包含角度应用程序：我试过这个，但没试过祝你好运编辑：这里的控制器不多见：当两个对话框都打开时，DOM基本上是这样的：您可以包含ValueRangeModalController的代码吗？实际上，我猜jQuery对话框中有什么东西阻止了您的javascript事件。第二个对话框添加到DOM的哪个部分？jQuery模态对话框有一个内部的_keepFocus方法，该方法将调用event.preventDefault（在对话

我有一个简单的网页，带有打开jQuery对话框的按钮：

现在，该对话框包含角度应用程序：

我试过这个，但没试过祝你好运

编辑：这里的控制器不多见：

当两个对话框都打开时，DOM基本上是这样的：

您可以包含ValueRangeModalController的代码吗？实际上，我猜jQuery对话框中有什么东西阻止了您的javascript事件。第二个对话框添加到DOM的哪个部分？jQuery模态对话框有一个内部的_keepFocus方法，该方法将调用event.preventDefault（在对话框上的任何鼠标下降时）覆盖使其成为模态的div您是否尝试在输入上添加自动聚焦属性？或者你的意思是你不能点击它？自动对焦没有帮助，点击它没有任何作用。user888734:请参阅我的编辑。

$("#openDialog").click(function(e) {
    openMyDialog();
});

function openMyDialog() {
    $( "#dialog" ).dialog({
      modal: true
    });
}

   <div id="dialog" ng-app="my-app"><my-directive></mydirective</div>

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

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

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

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