2

现场演示

我创建了一个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

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

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

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

是否有关于我们何时应该用 包装代码的指导方针$timeout？

该指令的工作版本使用$dialog.

4

1 回答 1

2

是否有关于我们何时应该用 $timeout 包装代码的指导方针？

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

但是，从我玩您的演示来看，这不是我看到的问题，并且可以简化代码。

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

此外，对于您的原始版本，我发现当您单击“是”关闭对话框时范围正在更新，并且它发生在摘要中，因此它应该触发任何观察者并因此关闭对话框。在这方面，我看不出它在我的浏览器中因任何原因而无法工作的原因，无论是否使用超时都没有区别。

于 2013-06-11T11:13:45.573 回答