Angular UI 模态打开的承诺在显示模态之前已解决 [英] Angular UI Modal opened promise is resolved before modal is shown

问题描述

我正在尝试在打开的模态上执行 jQuery 脚本，以便将其中一个字段转换为 jQuery UI Spinner.

我正在使用 opened 承诺，如 Angular UI 中所述.

问题:jQuery 选择器无法按预期工作，也无法检索任何内容.

所以我的控制器的功能之一是这样的:

var modalInstance = $modal.open({templateUrl: 'modalDialog.html',控制器:modalCtrl，解决: {noOfItems:函数(){返回 $scope.noOfItems;}}});modalInstance.opened.then(函数(){$(".spinner").spinner({最大:20，分钟:1});});modalInstance.result.then(函数(){console.log("模态关闭");});

还有我的 HTML:

modalCtrl 无关紧要.

提示:我尝试在 opened 承诺被调用时放置一个 debugger 并发现模态尚未打开.

仅供参考，我使用的是 jQuery 1.9.0、jQuery UI 1.10.4、AngularJS 1.2.16 和 Angular UI Bootstrap v0.11.

解决方案

您从错误的角度处理问题，试图从控制器进行低级 DOM 操作.这在 AngularJS 世界中是一个很大的禁忌，你会在路上遇到各种各样的麻烦.

您的 UI 逻辑不应该等待"给定的 DOM 节点添加到 DOM 树中，而应该以声明方式表达.在这种特殊情况下，这意味着您应该编写一个滑块"指令，就像这样简单:

yourModule.directive('mySpinner', function() {返回 {链接:功能(范围，榆树){榆树.微调({最大:20，分钟:1});}};});

然后在 modal 的 HTML 中使用这个新定义的指令:

这样当模态的内容被添加到 DOM 时你不必担心并且你已经让自己喜欢有一种可重用的方式来定义微调器！

回到与 $modal 相关的问题 - opened 承诺在所有数据准备就绪且模态即将显示(动画开始等)以能够显示等待时解决指标或类似.它绝不是为了知道模态的内容何时被插入到 DOM 树中而设计的，就像 AngularJS 一样，大多数时候并不真正需要这种知识.

I am trying to execute a jQuery script on the opened modal in order to transform one of the fields to a jQuery UI Spinner.

I am using the opened promise as documented in Angular UI.

ISSUE: The jQuery selector does not work as expected and doesn't retrieve anything.

So one of my controller's functions looks like that:

var modalInstance = $modal.open({
    templateUrl: 'modalDialog.html',
    controller: modalCtrl,
    resolve: {
        noOfItems: function(){
            return $scope.noOfItems;
        }
    }
});

modalInstance.opened
    .then(function () {
        $(".spinner").spinner({
            max: 20,
            min: 1
        });
    });

modalInstance.result
    .then(function () {
        console.log("modal closed");
    });

And my HTML:

<script type="text/ng-template" id="modalDialog.html">
    <div class="modal-header">
        <h4 class="modal-title">My Modal</h4>
    </div>
    <div class="modal-body">
        <input class="form-control spinner" type="text" ng-model="noOfItems" />
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-primary" ng-click="save()">Save</button>
    </div>
</script>

The modalCtrl is irrelevant.

HINT: I tried putting a debugger right when the opened promise is called and found out the modal is not opened yet.

FYI, I am using jQuery 1.9.0, jQuery UI 1.10.4, AngularJS 1.2.16 and Angular UI Bootstrap v0.11.

解决方案

You are approaching the problem from the wrong angle, trying to do a low-level DOM manipulation from a controller. This is a big no-no in the AngularJS world and you will get you into all sort of troubles down the road.

Your UI logic shouldn't be "waiting" for a given DOM node to be added to the DOM tree but rather should be expressed declaratively. In this particular case it means that you should write a "slider" directive, something as simple as:

yourModule.directive('mySpinner', function() {
  return {
    link: function(scope, elm) {
      elm.spinner({
        max: 20,
        min: 1
      });
    }
  };
});

and then use this newly defined directive from within modal's HTML:

<input class="form-control spinner" type="text" my-spinner ng-model="noOfItems"/>

This way you don't need to worry when modal's content gets added to the DOM and you've made yourself a favour of having a reusable way of defining spinners!

Coming back to the $modal-related question - the opened promise is resolved when all the data are ready and modal is about to be shown (animation starts etc.) to be able to display waiting indicators or similar. By no means it was designed to know when modal's content gets inserted into the DOM tree as with AngularJS this knowledge is not really needed most of the time.

这篇关于Angular UI 模态打开的承诺在显示模态之前已解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！