Question

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

我正在使用Angular UI中记录的opened承诺。

ISSUE： jQuery选择器无法按预期工作，也无法检索任何内容。

所以我的控制器的一个功能看起来像这样：

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无关紧要。

提示： 我在调用debugger承诺时尝试放opened，并发现模态尚未打开。

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

Answer 1

您正在从错误的角度解决问题，尝试从控制器执行低级DOM操作。在AngularJS世界中，这是一个很大的禁忌，你将会遇到各种各样的麻烦。

你的UI逻辑不应该等待＆＃34;将给定的DOM节点添加到DOM树中，但应该以声明方式表示。在这种特殊情况下，这意味着你应该写一个＆＃34;滑块＆＃34;指令，简单如下：

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

然后在模式的HTML中使用中新定义的指令：

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

通过这种方式，您不必担心将模态内容添加到DOM 和时，您已经帮助自己获得了可重用的定义方式纺纱！

回到与$ modal相关的问题 - 当所有数据都准备好并且即将显示模态（动画开始等）以便能够显示等待指标或类似时，opened承诺得到解决。绝不是设计为知道何时将模态的内容插入到DOM树中，就像AngularJS一样，大多数时候并不需要这种知识。

角度UI模态打开的承诺在模态显示之前解决

1 个答案: