Question

我知道有很多次问过同样的问题，但我找不到符合我要求的确切问题。所以这是我的问题：

我的控制器中有一个功能：

showPNG = function() {
        var pngPromise = $modal({
            template: 'index.html',
            persist: true,
            show: false,
            backdrop: 'static',
            scope: $scope,
            modalClass: 'preview-png'
        });
        $q.when(pngPromise).then(
            function(pngElement) {
                pngElement.modal('show');
            }
        );
};

我有3个具有相同功能的控制器。因此，我试图以某种方式重构它，以便在所有控制器中调用它。到目前为止我所做的是：

在服务中：

var service = module.exports =   function ($modal, $q) {
        return {
            showPNG : function(scope) {
                var pngPromise = $modal({
                    template: 'index.html',
                    persist: true,
                    show: false,
                    backdrop: 'static',
                    scope: scope,
                    modalClass: 'preview-png'
                });
                $q.when(pngPromise).then(
                    function(pngElement) {
                        pngElement.modal('show');
                    }
                );
            }
        };
};
service.$inject = ['$modal', '$q'];

在控制器中：

...
    myService.showPNG($scope);
...

此代码无任何错误。但问题是，可以将$scope作为参数传递给函数是服务导致任何副作用吗？这种方法还有更好的替代方案吗？

感谢。

Answer 1

我建议不要将$ scope传递给该服务。这使您的服务依赖于正在使用它的控制器。如果另一个控制器需要使用该服务怎么办？

相反，让服务返回一个promise，并在控制器中执行以下操作：

.controller("ctrl1", ["$scope", "service", function($scope, service){
   $scope.showModal = false;
   service.showPNG()
      .then(function(shouldShow){
         $scope.showModal = shouldShow;
         $scope.$apply(); // assuming showPNG is async
      });
}]);

修改：以下是如何实现模态对话服务的示例：http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service

在服务angularjs中的函数中使用$ scope

1 个答案: