Question

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

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

目前，我已通过$rootScope.$emit和$on完成此操作。

这种共享组件行为是否有更好的模式？

以下是我目前的实施....

我的主html文件中包含模板

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

所以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();
        });

    });

}]);

我从任何其他类似的控制器中调用它......

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

Answer 1

这种共享组件行为是否有更好的模式？

是。使用服务。然后，您可以将该服务注入到要使用它的每个控制器中，并调用方法将其打开;类似的东西：

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

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

（https://docs.angularjs.org/guide/services）

在Angular JS中显示/隐藏常见模态的最佳方法

1 个答案: