Angularjs javascript modals

Angularjs javascript modals

本文关键字：modals javascript Angularjs      更新时间：2023-09-26

我的SPA项目使用Angularjs。到目前为止，我正在设法得到我想要的。尽管如此，我还是没能让模式发挥作用，我需要一个简单的解释如何做到这一点

  1. 每个页面/视图都保存在一个单独的物理文件中（纯HTML）
  2. 对于每个页面/视图，都定义了一个控制器（同样，每个控制器都在自己的物理文件中）
  3. 我已经定义了一个路由提供程序，其中包括每个页面/视图的条目

打开模式对话框的触发可能发生在多个位置，其中一些位置打开同一个对话框，它可能来自于点击链接（类似<a>Click here</a>）、按钮，或者只是截取输入字段上的点击。

我要补充的是，在介绍"；成为"；modals作为普通页面（即将它们添加到路由提供程序列表中），我可以正确地查看内容。

我的最后一次尝试是在这里效仿，但没有成功。

我需要的是：

  1. 我应该如何以及在哪里配置这些模态（看了很多例子，现在我完全迷路了）
  2. 我应该如何援引对话的陈述
编辑：添加了最后一步。

以下是我的操作方法。假设您使用的是Angular ui引导模式。

首先，您需要一个"模态工厂"来包含模态的定义，这意味着它们将具有视图的url、控制器名称以及您可能想要传递到控制器上的任何变量。例如：

"use strict";
angular.module("sampleModule").factory("AppSharedModalFactory", AppSharedModalFactory);
AppSharedModalFactory.$inject = ["$modal"];
function AppSharedModalFactory($modal) {
    var factory = {};
    factory.openSelectionModal = openSelectionModal;
    function openSelectionModal (sampleVar) {
        var modalInstance = $modal.open({
            templateUrl:     "sampleRoot/sampleFolder/sampleView.html",
            controller: "SelectionModalController",
            size: "lg", // or other sizes, read the docs
            sample: { // resolve helps with passing variables into a controller when you instantiate it
                module: function () {
                    return sampleVar;
                }
            }
        });
        return modalInstance.result;
    };
    return factory;
};

到目前为止，您已经有一个工厂创建了一个模态实例，并返回该模态实例的PROMISE。

第二，当然，您需要在适当的位置定义sampleView.html和SelectionModalController，并将其包含在项目中。请记住，如果要使用在定义模态实例时定义的sample变量，则需要将其注入控制器。示例：

"use strict";
angular.module("sampleModule").controller("SelectionModalController", SelectionModalController);
SelectionModalController.$inject = ["sample"];
function SelectionModalController(myVariableNameForSample) {
};

第三，在您想要打开模态的控制器中，注入AppSharedModalFactory，只需调用工厂函数并将您想要的变量传递给它，这当然是可选的，然后使用返回的promise来解决在模态关闭后要解决的任何问题，方法是关闭（这会导致已解决的promise）或驳回（这会造成拒绝的promise。示例：

    $scope.openSelectionModal = function (sample) {
        appSharedModalFactory.openSelectionModal(sample).then(function (result) {
    console.log("yay I got a successful return.");
    }, function () {
    console.log("My modal was dismissed :(");
    });
};

最后，您可以在html中执行<a href="" ng-click="openSelectionModal('Hello World!')">click to open modal!</a>。

相关文章：