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

问题描述

我试图以改造中的一个字段，以在打开的模式执行一个jQuery脚本 jQuery UI的微调。

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.

我使用的是打开承诺在的角UI 。

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

问题：
如预期，不获取任何jQuery选择不工作。

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

和我的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>

的 modalCtrl 是无关紧要的。

提示：
我试图把一个调试权当打开承诺被调用，并发现了模态尚未打开。

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

仅供参考，我使用jQuery 1.9.0，jQuery UI的1.10.4，AngularJS 1.2.16和角度UI引导v0.11。

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

推荐答案

您是从错误的角度接近问题，试图从控制器做一个低层次的DOM操作。这是一个很大的禁忌在AngularJS世界，你会得到你到所有的烦恼排序在路上的。

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.

您UI逻辑不应等待对于一个给定DOM节点被添加到DOM树，而是应该声明pssed前$ P $。在这个特殊的情况下，这意味着你应该写一滑指令，一些简单的：

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

然后的使用范围内，从的这个新定义的指令模式的HTML：

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

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

这样，您就不必担心，当模式的内容被添加到DOM的和的你做你帮个忙具有限定纺纱的可重复使用的方式！

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!

现在回到$模式相关的问题 - 对打开时，所有的数据都准备就绪，模式即将显示（动画开始等等）承诺解决到能够显示等待指示器或类似。绝非它被设计为知道与AngularJS这种知识是不是真的需要的大部分时间。当模态的内容被插入到DOM树

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.

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