Angularjs javascript 模态

Question

I'm using Angularjs for my SPA project. So far, I'm managing to get what I want. Still, I'm failing to get modals to work and I need a simple explanation how to do it. Here are some details about my project structure:

1. Each and every page/view is held in a separate physical file (pure HTML)
2. For each page/view a controller is defined (again, each controller in its own physical file)
3. I have defined a route provider that includes an entry for each page/view

The trigger for opening modal dialogs may take place from several locations, some of them opening the same dialogue, and it would come from clicking on a link ( <a>Click here</a> like), buttons, or just intercepting click on input fields.

I should add that, when presenting the "to-be" modals as normal pages (ie adding them to the route provider list), I can see the contents properly.

My last attempt was following the example here with no success.

What I need is:

1. How and where should I configure these modals (looked at many examples, and right now I'm completely lost)?
2. How should I invoke the presentation of a dialogue?

Answer 1

EDIT: added a last step.

Here's how I would go about it. Let's assume you are using Angular-ui-bootstrap modals.

Firstly you need a "Modal Factory" to contain the definitions of your modals, which means they'll have the url to the view, controller name, and any variable you might wanna pass onto your controller. For example:

"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;
};

So far you have a factory that creates a modal instance, and returns the PROMISE of that modal instance.

Secondly of course you need sampleView.html and SelectionModalController to be defined in proper places and be included in the project. Remember that if you want to make use of the sample variable defined while defining the modal instance, you need to inject it into your controller. Example:

"use strict";
angular.module("sampleModule").controller("SelectionModalController", SelectionModalController);

SelectionModalController.$inject = ["sample"];

function SelectionModalController(myVariableNameForSample) {
};

Thirdly, in the controller that you want to open the modal on, you inject your AppSharedModalFactory and simply call the factory function and pass the variable you want to it, which is of course optional, and then use the returned promise to resolve anything you want to resolve after the modal has been closed by being closed -which results in a resolved promise- or dismissed -which results in a rejected promise. Example:

    $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 :(");
    });
};

And at last, you can do <a href="" ng-click="openSelectionModal('Hello World!')">click to open modal!</a> in your html.