2016-06-23 6 views
2

Angularで動作する特定の問題が発生しました。私は、アップロードされたファイルを検証するためにvalidateFiles機能を持っていuploadControllerという名前の親コントローラを持っています。

ボタンからクリックすると、モーダルポップアップが開き、値を入力できます。そのフォームの送信時に、他のコントローラにあるvalidateFilesメソッドを呼び出したいとします(モーダルコントローラの名前はUIモーダルフォームの入力データを持つUserUploadDataCtrlです)。

私は$ rootScopeを考えた。$ UserUploadDataCtrlと$スコープで放送。$上のuploadControllerに素晴らしいことです。

私がやった何

...

if ($scope.groupMembershipUserInputForm.$valid) { 
    $scope.groupmembershipUploadParams = { 
     "chapterCode": $scope.groupmembership.chapterCode, 
     "groupCode": $scope.groupmembership.groupCode, 
     "createdDate": $filter('date')(new Date($scope.groupmembership.createdDate), 'MM/dd/yyyy'), 
     "endDate": $filter('date')(new Date($scope.groupmembership.endDate), 'MM/dd/yyyy') 
    } 

    $rootScope.$broadcast('validateUploadedFilesEvent', $scope.groupmembershipUploadParams); 

、その後でuploadController

// NOW VALIDATE THE UPLOADED THE FILES. 
$scope.$on('validateUploadedFilesEvent', function (event, arg) { 
    UploadDataServices.setUploadParams(arg); 
    $scope.validateFiles(); 
}); 

それは、UploadDataServices.setUploadParams(引数)は関数ではありませんと言います。

しかし、私は同じように何度も使ってきました。

UploadModule.factory('UploadDataServices', ['$http', '$rootScope', '$filter', function ($http, $rootScope, $filter) { 


    var uploadParams = null; 

    return { 

     setUploadValidationResult: function (result) { 
      uploadValidationResultData = result; 
     }, 

     getUploadValidationResult: function() { 
      return uploadValidationResultData; 
     }, 


     setUploadParams: function (params) { 
      uploadParams = params; 
     }, 

     getUploadParams: function() { 
      return uploadParams; 
     } 

....私が間違っているの

ここでここでエラー

enter image description here

がuploadController定義

UploadModule.controller('GroupMembershipUploadController', ['$scope', '$location', '$log', 
    '$window', '$localStorage', 'mainService', '$state', '$rootScope', '$http', '$uibModal', '$uibModalStack', 'uiGridConstants', 'UploadDataServices', 'UploadServices', 
function ($scope, $location, $log, $window, $localStorage, mainService, $state, $rootScope, $http, $uibModal, $uibModalStack, uiGridConstants, UploadDataServices, UploadServices) { 
+0

あなたは 'UploadDataServices'をどのように注入していますか?あなたは 'GroupMembershipUploadController'のコードを表示できますか? – Satpal

+0

更新された詳細を見つけてください。 – StrugglingCoder

+0

メソッドを呼び出すときに 'UploadDataServices'とは何ですか?それが 'console.log'ならば。あなたはあなたのコントローラーで何かをやっているのか、そのメソッド/プロパティを消費しているだけなのですか? – ste2425

答えて

2

です私はあなたの問題に対する答えを持っていないが、私は違ったあなたのコードを構造化することをお勧め。私は答えとしてこれを追加しました。これはこれがコメントのためにあまりにも多いためです。私の意見で

、モーダルコントローラが必要な場合にのみバックインスタンスに結果を渡す(クローズ、キャンセル)モーダル自身のライフサイクルを管理する必要があります。

モーダルhtmlにはアップロードコンポーネントが含まれている必要があります。アップロードコンポーネントコントローラは、アップロードデータサービスを注入してそれを直接使用することができます。

別に関心事の分離から、もう一つの利点は、あなたが今(あなたがしたいはずです)独立モーダルのアップロードを行うことができるということです。

サービスがシングルトンであることに気づいているかもしれません。サービスへの複数回の呼び出しでユースケースを広げることは、コードの匂いとみなされ、複数のコントローラーにサービスを提供していた場合に問題が発生する可能性があります。例えば

モーダルコントローラ

例えば、モーダル制御がキャンセルされるフォームを処理させます。このパターンを使用すると、閉じるなどのフォームから他のアクションを処理できます。

angular.module('myapp').controller('ModalCtrl', function ($scope, $uibModalInstance) { 
    'use strict'; 

    // handle a cancel on the form 
    $scope.cancel = function() { 
    $uibModalInstance.dismiss(); 
    }; 

}); 

モーダルHTML

<div class="deposit-funds"> 
    <upload cancel="cancel()"></upload> 
</div> 

アップロード指示

angular.module('myapp').directive('upload', function() { 
    'use strict'; 
    return { 
    ... 
    'scope': { 
     cancel: '&?' // let the modal controller close the modal on cancel 
    }, 
    'controller': 'UploadCtrl', 
    ... 
    }; 
}); 

アップロードコントローラ

angular.module('myapp').controller('UploadCtrl', function (uploadService) { 
    var that = this; 

    that.submit = function() { 
    uploadService.doStuff(); 
    } 
} 
+0

私は、モーダルコントローラーがモーダルのライフサイクルを処理し、元のコントローラーにデータを戻すという点で、コメント担当者に同意します。 – rrd

関連する問題