从外部文件角度$ md对话框控制器

从材料设计使用md对话框，我遇到了一个小问题，这导致我很多麻烦。

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

我试图把它写成一个服务，但问题是，因为我绑定数据从窗体到控制器我使用$范围，这样我得到“$范围没有定义”。当我在该服务中添加$ scope作为依赖项时，我会发生注入错误。你有什么想法如何从外部加载模态控制器，所以即使使用$ scope也能工作吗？

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

而且控制器search.js：与外部控制器的对话

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

来源

2016-09-16 Jakub Mana

请告诉我们你的代码。您也可以使用'locals'将数据解析传递给对话框控制器 – charlietfl

http://pastebin.com/0Acq3E2U –

代码应该包含在问题本身中。你可以随时更新问题 – charlietfl

例

(function() { 

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

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

function DialogController($scope, $mdDialog) { 

    $scope.closeOpenedDialog = closeOpenedDialog; 

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

来源

2016-09-16 17:52:54 Akis

要为服务使用，你可以这样做：

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>

如果您需要从控制器还传递数据给模态，你可以添加其他参数，并把它传递到$mdDialoglocals财产或共享通过其他服务属性

来源

2016-09-16 17:53:07 charlietfl

如果您的mdDialog配置无法识别您的控制器名称，因为它属于外部文件，那么不要这么做：

controller   : 'DialogController'

你应该载入您的控制器在对话框的视图中的指令：

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

来源

2017-08-03 21:24:35

从外部文件角度$ md对话框控制器

回答

相关问题