用角JS显示/隐藏通用模态的最佳方式

I have an angular-ui-bootstrap modal template, controller and instance controller as per the angular demo (http://plnkr.co/edit/?p=preview)

我有一个angular-ui-bootstrap模态模板、控制器和实例控制器，根据角度演示(http://plnkr.co/edit/?p=preview)

I want any other controller in my application to be able to show / hide this common modal view.

我希望应用程序中的任何其他控制器能够显示/隐藏这种通用的模式视图。

At the moment, I have done this via the $rootScope.$emit and $on.

目前，我通过$rootScope实现了这一点。释放美元。

Is there a better pattern for this kind of shared component behaviour?

这种共享组件行为有更好的模式吗?

Below is my current implementation....

下面是我目前实现....

I have the template included in my main html file

我的主html文件中包含了模板

<div ng-include src="'/views/partials/modal.html'" ng-controller="ModalController as vm"></div>

So the ModalController has ...

ModalController。

app.controller('ModalController', ['$rootScope', '$modal', function($rootScope, $modal) {

    $rootScope.$on("modal:open", function(event, params, okCallback, cancelCallback) {

        okCallback = okCallback || _.noop;
        cancelCallback = cancelCallback || _.noop;

        var modalInstance = $modal.open({
            animation: true,
            templateUrl: 'modal.html',
            controller: 'ModalInstanceController',
            controllerAs: "vm",
            //size: 'sm',
            resolve: {
                params: function() {
                  return params
                }
            }
        });

        modalInstance.result.then(function (result) {
              okCallback(result);
            }, function () {
              cancelCallback();
        });

    });

}]);

And I call it from any other controller like this....

这样的,我叫它从其他控制器....

$rootScope.$emit("modal:open", {
        title:"Are you sure?",
        body:"Are you sure you want to do this?",
        confirm:true,
        okClass:"btn-warning"
    }, success function() {
    }, error function() {
});

1 个解决方案

#1

Is there a better pattern for this kind of shared component behaviour?

这种共享组件行为有更好的模式吗?

Yes. Use a service. You can then inject that service into each controller you want to use it and call a method to open it; something like:

是的。使用一个服务。然后，您可以将该服务注入您想要使用的每个控制器，并调用一个方法来打开它;喜欢的东西:

modalService.openModal({
    title:"Are you sure?",
    body:"Are you sure you want to do this?",
    confirm:true,
    okClass:"btn-warning"
}, function success(){}, function error(){});

The openModal method has the same code as the $rootScope.$on('modal:open') function.

openModal方法的代码与$rootScope相同。$on('modal:open')函数。

(https://docs.angularjs.org/guide/services)

#1