【问题标题】:confirm modal using ngDialog使用 ngDialog 确认模态
【发布时间】:2015-07-28 08:23:51
【问题描述】:

我在我的应用程序中使用 ngDialog,我想创建一个通用的确认模式,我可以在需要时使用它,确认消息会有所不同。

我的问题:

1- 使用 ngDialog 功能创建指令是个好主意吗?它的设计是什么?

2- ngDialog代码中confirm()和openConfirm()有什么区别。

提前致谢

【问题讨论】:

    标签: angularjs ng-dialog


    【解决方案1】:

    好吧,回答你的问题,

    1 - 你可以为它创建一个指令,有一个scope,比如type,你将确认类型传递给它(即submit用于提交确认,delete用于删除确认)并且指令应该根据您指定的类型呈现消息。

    2 - openConfirm()是ngDialog的一种,只能通过确认动作来关闭(不像ngDialog.open()),所以这里没有能力在点击@987654328中的任意位置时关闭对话框@。 confirm() 只是你用来关闭对话框的一个方法,你使用这个方法来关闭对话框并解决打开模式时返回的承诺,所以它可以在你的对话框中继续<button ng-click="confirm()">Confirm</button>

    希望对你有帮助

    更新

    openConfirm() 打开一个对话框,默认情况下在点击退出或单击对话框窗口外时不会关闭。该函数返回一个promise,根据对话框关闭的方式解决或拒绝。

    要解决这个承诺,你的对话框应该是这样的:

    使用 ngDialog 控制器

    ngDialog.openConfirm({
        template: '<div></div>',
        controller: ['$scope', function($scope) { 
          // Controller logic here
        }]
    }).then(function (success) {
        // Success logic here
    }, function (error) {
        // Error logic here
    });
    

    带指令控制器

    ngDialog.openConfirm({
        template: '<div></div>',
        scope: $scope, // <- ability to use the scopes from directive controller
    }).then(function (success) {
        // Success logic here
    }, function (error) {
        // Error logic here
    });
    

    只要在对话框中传递scope: $scope,就可以使用指令控制器

    这是一个demo 向您展示如何使用类型

    尝试将index.html 中的类型从confirm 切换为remove,然后在对话框中查看更新的内容和按钮文本

    【讨论】:

    • 感谢 Razvan 的回答,确认后如何解决这个承诺?如何得到它?我是否需要将控制器与 ngDialog 连接,或者我可以拥有自己的指令控制器?如果我将 openConfirm() 与 showClose button true 一起使用,这将意味着我正在创建与 open() 相同的内容,但唯一的区别是在模态外部单击不会关闭我的 openConfirm 模态?如果是这样,他们只会在外部单击以关闭作为布尔功能。如果你请向我澄清。 @razvan
    • @sisimh 我刚刚用解释更新了我的答案
    • 谢谢@Razvan Balosin 这肯定对我有帮助:),关于你提到的类型的一个小问题,提交和删除有什么区别?我认为 CSS 就像按钮颜色一样,ngdialog css 文件中是否有一些类可以用于按钮?
    • @sisimh 我刚刚添加了一个演示。您可以在指令中创建任何类型的变量,以便在您的应用程序中随处使用它。查看演示,了解如何根据您指定的类型更新按钮文本和内容
    • 如果我有一些自定义逻辑在我的模态中请求数据怎么办?就像我有一个项目列表,在选择一个选项时,我需要从后端检索一些关于它的数据,因为我创建了一个指令,所以我需要涵盖这种情况
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-04-30
    • 2014-01-05
    • 2015-11-24
    • 2014-05-03
    • 1970-01-01
    • 1970-01-01
    • 2011-07-15
    相关资源
    最近更新 更多