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的{{1}}属性或通过其他服务属性共享

Answer 2

带外部控制器的对话框示例：

$mdDialog.show({
    scope               : scope,
    preserveScope       : true,
    templateUrl         : 'template/search.html',
    targetEvent         : event,
    clickOutsideToClose : true,
    fullscreen          : true,
    controller          : 'DialogController'
});

控制器search.js：

(function() {

angular.module('myApp')
    .controller('DialogController', DialogController);

DialogController.$inject = ['$scope', '$mdDialog'];

function DialogController($scope, $mdDialog) {

    $scope.closeOpenedDialog  = closeOpenedDialog;

    function closeOpenedDialog() {
       $mdDialog.hide();
    }
}
})();

Answer 3

如果您的mdDialog配置无法识别您的控制器名称，因为它属于外部文件，那么请执行以下操作：

controller          : 'DialogController'

您应该在对话框的视图中将控制器作为指令加载：

<md-dialog ng-controller="DialogController">
...
</md-dialog>

来自外部文件

3 个答案: