외부 파일의 각도 $ md-dialog 컨트롤러

Question

Material Design의 md-dialog를 사용하여 나에게 많은 문제를 일으키는 작은 문제가 발생했습니다.

저는이 대화 상자를 db로 새 레코드를 만드는 형식으로 사용하고 있습니다. 컨트롤러를 외부 파일에서로드해야합니다. 그 이유는 많은 다른 컨트롤러에서 앱의 여러 위치에서 동일한 대화 상자를 사용하고 있기 때문에 복사하고 붙여 넣기를 원합니다.

서비스로 쓰려고했지만 문제는 양식에서 컨트롤러로 데이터를 바인딩 할 때 $ scope를 사용하고 있는데 "$ scope is not defined"입니다. $ 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(); 
        } 
       }); 
      } 

Answer 1

예

(function() { 

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

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

function DialogController($scope, $mdDialog) { 

    $scope.closeOpenedDialog = closeOpenedDialog; 

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

Answer 2

서비스로 사용하려면 당신은 같은 것을 수행 할 수 있습니다

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> 

당신이 다른 인수를 추가하고 다른 서비스 속성을 통해 $mdDialog의 locals 속성에 전달하거나 공유 할 수 모달 컨트롤러 또한 데이터를 전달해야하는 경우

Answer 3

외부 파일에 속해 있기 때문에 mdDialog 구성에서 컨트롤러 이름을 인식하지 못하면 다음을 수행하는 대신

controller   : 'DialogController' 

당신은 당신의 대화의 관점에서 지침으로 컨트롤러를로드해야합니다 :

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