Question

我创建了一个confirmationDialogHeader指令，使用方式如下：

<ul>
  <li ng-repeat="item in items">
    {{item}}
    <button class="btn btn-mini" 
            confirmation-dialog-header="Delete Item" 
            confirmation-dialog-action="deleteItem($index)">
      Delete
    </button>
  </li> 
</ul>

单击该按钮时，应打开确认对话框，如果用户确认，则应调用deleteItem($index)，然后关闭对话框。

我的问题是最后一点：关闭对话框。

这是控制器（CoffeeScript）：

app.controller 'AppCtrl', ['$scope', '$q', '$timeout', ($scope, $q, $timeout) ->
  $scope.items = ['Item 1', 'Item 2'] 
  $scope.deleteItem = (index) ->                         
    deferred = $q.defer()
    $timeout ->
      $scope.items.splice(index, 1)   # All good if this line is removed
      deferred.resolve()
    , 1000
    deferred.promise
]

这是指令：

app.directive 'confirmationDialogHeader', ['$compile', '$q', ($compile, $q) ->
  restrict: 'A'
  scope:
    confirmationDialogAction: '@'
  controller: ($scope) ->
    $scope.onConfirm = ->
      $scope.$parent.$eval($scope.confirmationDialogAction).then ->
        $scope.confirmationDialog = off   # Why this doesn't close the dialog?
  link: (scope, element, attrs) -> 
    $confirmationDialog = $ """
      <div modal="confirmationDialog">
        <div class="modal-header">
          <h4>#{attrs.confirmationDialogHeader}</h4>
        </div>
        <div class="modal-body">
          Are you sure?
        </div>
        <div class="modal-footer">
          <button class="btn" ng-click="confirmationDialog = false">
            Cancel
          </button>
          <button class="btn" ng-click="onConfirm()">
            Yes
          </button>
        </div>
      </div>
    """

    $(document.body).append($confirmationDialog)
    $compile($confirmationDialog)(scope)

    $(element).click ->
      scope.$apply ->
        scope.confirmationDialog = yes  

]

deleteItem()完成并执行$scope.confirmationDialog = off后

As you can see，对话框未关闭。

有趣的是，如果$scope.items.splice(index, 1)被$timeout包裹，则对话框正确关闭！

$timeout ->
  $scope.items.splice(index, 1)

为什么这里需要$timeout包装？

是否有关于何时使用$timeout包装代码的指南？

Working version of this directive that uses $dialog.

Answer 1

是否有关于何时使用$ timeout包装代码的指导原则？

$ timeout用作本机setTimeout的替代。优于本机超时的优点是它在try / catch块中运行回调，并且发生的任何错误都将转发到您的应用程序exceptionHandler服务。

然而，从我玩你的演示不是我看到的问题，代码可以简化。

<强>更新我希望使用模态对话框来实现您的具体实现，但我没有太多运气。所以使用$ dialog服务而不是modal指令实现它。也许它会有所帮助 - here it is

此外，使用您的原始版本，我发现当您单击是以关闭对话框并且它在摘要中发生时，范围正在更新，因此它应该已经解雇了任何观察者，从而关闭了对话框。在这方面，我无法看到为什么它在我的浏览器中无论何种原因都无法工作，无论是否使用超时都没有区别。

AngularJS：为什么以及何时需要调用$ timeout？

1 个答案: