外部ファイルからの角度$ md-dialogコントローラ

Question

マテリアルデザインのmd-dialogを使用しているので、私は大きな問題を引き起こす小さな問題に出くわしました。

私はこのダイアログをdbで新しいレコードを作成するためのフォームとして使用しています。コントローラを外部ファイルからロードする必要があります。理由は、私はアプリの多くの場所で（他の多くのコントローラで）同じダイアログを使用しているので、私はそれらのそれぞれにコピーして貼り付けたくありません。

私はサービスとして書こうとしましたが、問題は、フォームからコントローラにデータをバインドしているので、私は$ scopeを使用しています。そのようにして、 "$ scopeは定義されていません"。そのサービスに$ scopeを依存関係として追加すると、インジェクションエラーが発生しました。 modalコントローラを外部からロードして、$ 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;   
}) 

そして、あなたがmodalに、コントローラからもデータを渡す必要がある場合は、別の引数を追加して、別のサービスプロパティを通じてlocals$mdDialogのプロパティまたは共有にそれを渡すことができ観点から

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

にイベントを渡します

Answer 3

外部ファイルに属しているため、mdDialogの設定がコントローラ名を認識しない場合は、次のようにします。

controller   : 'DialogController' 

あなたのダイアログの表示でディレクティブとしてあなたのコントローラをロードする必要があります。

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