来自外部文件的Angular $ md-dialog控制器

Question

我正在使用Material Design的md-dialog,我遇到了一个小问题,这给我带来了很多麻烦.

我正在使用此对话框作为在db中创建新记录的表单,我需要从外部文件加载其控制器.原因是我在应用程序的许多地方(在许多其他控制器中)使用相同的对话框,我不想复制并粘贴到它们中的每一个.

我试图把它写成一个服务,但问题是,因为我将数据从表单绑定到控制器我使用$ scope,这样我就得到了"$ scope未定义".当我在该服务中添加$ scope作为依赖项时,我会注入错误.你有任何想法如何从外部加载模态控制器,所以它甚至可以使用$ scope吗？

$scope.showNewContactDialog = function($event) {
            var parentEl = angular.element(document.body);
                $mdDialog.show({
                parent: parentEl,
                targetEvent: $event,
                templateUrl: 'app/Pages/directory/contacts/newContact.dialog.html',
                controller: NewCompanyContactDialogCtrl,
                clickOutsideToClose: true,
                hasBackdrop: true
            });  
        };

// New User dialog controller
        function NewCompanyContactDialogCtrl($scope, $mdDialog) {
            var self = this;
            $scope.modalIcon = "add";
            $scope.modalTitle = 'Nová položka';
            $scope.modalAdvanced = true;

            // Country Selector
            apiCalls.getData(countryUrl, function(response){
                $scope.countries = response;
            })

            // Add New Object
            $scope.newItem = function() {
                var url = baseUrl + 'new/';
                var data = JSON.stringify({
                    code: $scope.newItem.contactCode,
                    first_name: $scope.newItem.contactFirstName,
                    last_name: $scope.newItem.contactLastName,
                    street: $scope.newItem.contactStreet,
                    city: $scope.newItem.contactCity,
                    country: $scope.newItem.contactCountry,
                    postal: $scope.newItem.contactPostal,
                    pobox: $scope.newItem.contactPobox,
                    price_lvl: $scope.newItem.contactPriceLvl,
                    orgid: $cookies.get('orgid')
                });

                apiCalls.postData(url, data, function(response){
                    console.log(response);

                    // Toast
                    if(response.status == 201){
                        $mdToast.show(
                            $mdToast.simple()
                                .textContent('Záznam bol vytvorený.')
                                .position('bottom right')
                                .action('Skry?')
                                .highlightAction(true)
                                .highlightClass('md-warn')
                        );

                        $mdDialog.cancel();   
                    }
                });
            }

Answer 1

要用作服务,您可以执行以下操作:

angular.module('myApp').factory('newCompModal', function($mdDialog){
        var parentEl = angular.element(document.body);

       function show($event){
            return  $mdDialog.show({
                parent: parentEl,
                targetEvent: $event,
                templateUrl: 'app/Pages/directory/contacts/newContact.dialog.html',
                controller: 'NewCompanyContactDialogCtrl',
                clickOutsideToClose: true,
                hasBackdrop: true
            });

       }    
      return {
        show: show
      }    
});

然后在任何控制器:

angular.module('myApp').controller('someController',function($scope,newCompModal){
        $scope.newCompanyModalShow = newCompModal.show;        
})

并从视图中传递事件

<button ng-click="newCompanyModalShow($event)">New Company</button>

如果您还需要将数据从控制器传递到模态,您可以添加另一个参数并将其传递给locals属性$mdDialog或通过另一个服务属性共享