從外部文件角度$ 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對話框控制器

回答

相關問題