javascript - $scope.$on 内的 "is not a function"类型错误

Question

我在使用 Angular 时遇到了一个具体问题。我有一个名为 uploadController 的父 Controller ，它有一个 validateFiles 函数来验证上传的文件。

从 UI 单击按钮时，会打开一个模式弹出窗口，我可以输入一些值。在提交该表单时，我想调用其他 Controller 上的 validateFiles 方法(模态 Controller 的名称是 UserUploadDataCtrl，其中包含来自 UI 模态表单的输入数据)。

我认为 UserUploadDataCtrl 中的 $rootScope.$broadcast 和 uploadController 中的 $scope.$on 会很棒。

我做的是...

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(arg) 不是函数。

但我已经用同样的方式多次使用它了。

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;
        }

....

我哪里做错了？

这里是错误

这是上传 Controller 的定义

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) {

Answer 1

我没有您的问题的答案，但我建议以不同的方式构建您的代码。我已将其添加为答案，因为这对于评论来说太多了。

在我看来，模态 Controller 应该只管理模态本身的生命周期(关闭、取消)，并在需要时将结果传回实例。

模态 html 应包含上传组件。上传组件 Controller 可以注入(inject)上传数据服务，直接使用。

除了关注点分离之外，另一个好处是您现在可以独立于模式进行上传(如果您愿意的话)。

您可能知道服务是单例的。将您的用例分散到对服务的多个调用中可能会被视为一种代码味道，如果它为多个 Controller 提供服务，则可能会遇到问题。

例如，

模态 Controller

例如，让模态 Controller 处理被取消的表单。使用此模式，您可以处理来自表单的其他操作，例如关闭。

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',
    ...
  };
});

上传 Controller

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

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