Question

我正在为我的SPA项目使用Angularjs。到目前为止，我已经设法得到我想要的东西。尽管如此，我还没有让MODAL工作，我真的需要一个 FOR DUMMIES 解释如何做到这一点。以下是有关我的项目结构的一些细节： 1）每个页面/视图都保存在一个单独的物理文件中（纯HTML）， 2）对于每个页面/视图，定义一个控制器（同样，每个控制器在它自己的物理文件中）， 3）我已经定义了一个路由提供者，其中包含每个页面/视图的条目。

打开模态对话框的触发器可以从多个位置进行，其中一些位置打开相同的对话框，它可以来自点击链接（<a>Click here</a>之类的），按钮，或只是拦截点击输入字段。

我应该补充一点，当将“准备”模式呈现为普通页面时（即将它们添加到路由提供者列表中），我可以正确地看到内容。

我的最后一次尝试是关注示例here但没有成功。

我需要的是： 1）我应该如何以及在何处配置这些模态（看了很多例子，现在我完全迷失了？）， 2）我应该如何调用对话的演示文稿？

由于我不是Angularjs的专家，因此对一些 TODO 列表的详细解释将受到高度赞赏。

感谢。

Answer 1

编辑：添加了最后一步。

在这里，我将如何解决这个问题。我们假设您正在使用Angular-ui-bootstrap模态。

首先你需要一个＆＃34;莫代尔工厂＆＃34;包含模态的定义，这意味着它们将具有视图的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并简单地调用工厂函数并传递你想要的变量，这当然是可选的，然后使用返回承诺，通过关闭模式关闭后解决您要解决的任何问题 - 这会导致已解决的承诺 - 或解雇 - 导致拒绝的承诺。例如：

    $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>。

Angularjs javascript模态

1 个答案: