Question

我遇到了使用Angular的特定问题。我有一个名为 uploadController 的父控制器，它具有 validateFiles 功能来验证上传的文件。

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

我认为$ rootScope。$在UserUploadDataCtrl中广播，$ scope。$ on on 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（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;
        }

...

我在哪里做错了？

这是错误

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

Answer 1

我不能解决您的问题，但我建议您以不同的方式构建代码。我已将其添加为答案，因为这对评论来说太过分了。

在我看来，模态控制器应该只管理模态本身的生命周期（关闭，取消），如果需要，将结果传回实例。

模态html应包含上传组件。上传组件控制器可以注入上传数据服务并直接使用它。

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

您可能知道服务是单身人士。在多次调用服务时传播您的用例可能会被视为代码异味，如果它为多个控制器提供服务，则可能会遇到问题。

例如，

模态控制器

例如，让模态控制器处理被取消的表单。使用此模式，您可以处理表单中的其他操作，例如close。

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

＆＃34;不是一个功能＆＃34; $ scope内的类型错误。$ on

1 个答案: