我是 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();
}

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

首先我认为自定义指令可以很好地工作，但随后我需要在隔离作用域中创建一个双向绑定(bind)变量并监视它以了解何时打开对话框 + 创建几个方法- 当用户点击按钮时的绑定(bind)。我还需要将指令放在 HTML 中。

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

根据我的发现，Angular 服务似乎是最好的方法(将对话框注入(inject) DOM)，并 promise 让我知道点击了什么。该服务应该非常易于使用 - 如下所示:

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

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

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

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

最佳答案

我想出了下面的解决方案，以防它对某人有所帮助。

对话框服务.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>

Controller 中的 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

关于javascript - 使用 AngularJS 和 Kendo UI 的简单模式对话服务，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25901817/