Question

我是Angular的新手，需要一些帮助来创建一个可恢复的服务或类似的，以显示一个非常简单的是/否对话框。

我正在使用Kendo UI的窗口组件来显示模态对话框，但我发现自己在需要确认对话框的地方复制几乎完全相同的代码/ HTML：

<div kendo-window="myDialogWindow" k-modal="true" k-visible="false" k-width="250">
  <div style="text-align: center; width:100%">
      <div style="margin:10px 0 15px 0">{{ dialog.message }}</div>
      <button class="k-button k-primary" id="yesButton" ng-click="onYes()">Yes</button>
      <button class="k-button" id="noButton" ng-click="onNo()">No</button>
  </div>
</div>

然后从某些点击事件或类似事件中，我调用一个方法来打开和居中对话框：

$scope.showDialog = function(title, message) {
   $scope.dialog.message = message;
   $scope.myDialogWindow.title(title);
   $scope.myDialogWindow.center();
   $scope.myDialogWindow.open();
}

我希望尽量减少代码重复并为此创建可重用的东西。

首先我想到一个自定义指令会运行良好，但是我需要在隔离范围内创建一个双向绑定变量并在其上放置一个监视器以了解何时打开对话框+创建一些方法用户点击按钮时的绑定。我还需要将指令放在HTML中。

我一直在寻找一个解决方案，但我发现的东西对我的适度需求来说太过分了（而且我也喜欢使用Kendo UI，以获得一致的主题）。

根据我的发现，似乎Angular服务可能是最好的方法（将对话框注入DOM），并承诺让我知道点击的内容。该服务应该非常简单易用 - 如下所示：

dialogService.display("Some title", "The message").then(
   function() {
       // Yes clicked...
   }, function() {
       // No clicked...
   });

这是一个简单的plunker，只需在单击按钮时打开一个剑道对话框：http://plnkr.co/edit/ywCc3ZqFAXl3JEAu9XHW?p=preview

回顾一下：如何创建一个显示“是/否”对话框的服务，并承诺告诉我点击了什么？如果可能，请更新plunker以演示解决方案。

当然，如果有更好的方法，我愿意接受建议。

Answer 1

我想出了下面的解决方案，以防有人帮忙。

dialogService.js：

(function () {
    'use strict';

    var serviceId = 'dialogService';
    angular.module('app').factory(serviceId, ['$q', dialogService]);

    function dialogService($q) {
        var service = {
            showDialog: showDialog
        };

        return service;

        function showDialog(title, message) {
            var deferred = $q.defer();

            var html = 
              '<div id="myDialogWindow"> ' +
              ' <div style="text-align: center; width:100%"> ' +
              '   <div style="margin:10px 0 15px 0">' + message + '</div> ' +
              '   <button class="k-button k-primary" id="yesButton">Yes</button> ' +
              '   <button class="k-button" id="noButton"">No</button> ' +
              '   </div> ' +
              '</div> ';

            $('body').append(html);

            var windowDiv = $('#myDialogWindow');
            windowDiv.kendoWindow({
                width: "250px",
                title: title,
                modal: true,
                visible: false
              });

            var dialog = windowDiv.data("kendoWindow");

            $('#yesButton').click(function(e) {
              dialog.close();
              $('#myDialogWindow').remove();
              deferred.resolve();
            });

            $('#noButton').click(function(e) {
              dialog.close();
              $('#myDialogWindow').remove();
              deferred.reject();
            });

            dialog.center();
            dialog.open();

            return deferred.promise;
        }
    }
})();

HTML：

<div ng-controller="myController">
   <button ng-click="showDialog('Delete Confirmation', 'Delete line?')">Click me!</button>
</div>

控制器中的showDialog方法：

$scope.showDialog = function(title, message) {
   dialogService.showDialog(title, message).then(
     function() {
       alert('Yes clicked');
     },
     function() {
       alert('No clicked');
     });
}

新的plunker：http://plnkr.co/edit/WY0x1n6PwIKqxK0sKr3u?p=preview

使用AngularJS＆amp; amp;的简单模态对话服务剑道UI

1 个答案: