Javascript 角度：控制器和指令之间以可测试的方式进行通信？

我刚开始学习Angular，我正试图用它来构建一个文件上传器，它允许我把文件拖到它上面，然后它们就会被上传。相对简单。但是我有点不确定如何在控制器和指令之间进行通信，并使其可测试。我的第一个想法是这样做：

angular.module('UploadApp', [])
.controller('UploadController', ['$scope', function($scope) {
    $scope.files = [];

    $scope.$watch('files', function() {
        //TODO: Upload the files somehow, I haven't written the service to do this yet
    }, true);
}])

.directive('UploaderDropzone', function() {
    return {
        restrict: 'A',
        scope: {
            files: '=UploaderFiles'
        },
        link: function(scope, element) {
            function addFile(file) {
                if (file.type && (file.type.indexOf('image/') === 0 ||
                                  file.type.indexOf('video/') === 0)) {

                    scope.$apply(function() {
                        scope.files.push(file);
                    });
                }
            }

            scope.watch('files', function() {
                //TODO: Do something to display the status of the uploads
            }, true);

            element.on('dragenter dragover', function(event) {
                element.addClass('hover');
                event.preventDefault();
            });

            element.on('dragleave drop', function(event) {
                var files = event && ((event.target && event.target.files) || 
                                      (event.dataTransfer && event.dataTransfer.files));

                if (files) {
                    [].forEach.call(files, function(file) {
                        addFile(file);
                    });
                }

                element.removeClass('hover');
                event.preventDefault();
            });
        }
    };
});

然后在模板中：

<div ng-controller="UploadController">
    <div uploader-dropzone uploader-files="files"></div>
</div>

---

我计划将文件包装在一个对象中，这样我就可以将上传进度、成功状态反馈给指令等等。但我不知道如何测试该代码，因为在$watch中触发代码似乎会很痛苦？有更好的方法吗？

您可以在指令中使用ng模型，从您的角度来看，我可以理解您想要捕获文件的值。 代码将类似于 .指令'UploaderDropzone'，函数{ 返回{ 限制：“A”， 范围：{ 文件：'=上传文件' }, 链接：功能范围、元素、模型{

或者，您可以使用一些服务在两者之间进行通信，如下所示 myModule.directive'myComponent'，functionmySharedService{ 返回{ 限制：'E'， 控制器：函数$scope、$attrs、mySharedService{

我发现了上述方法的一个例子，可能是它可以以更好的方式帮助您

var myModule=angular.module'myModule'，[]； myModule.factory'mySharedService'，函数$rootScope{ var sharedService={}

'sharedService.message=

sharedService.broadcastItem = function() {
    $rootScope.$broadcast('handleBroadcast');
};
myModule.directive('myComponent', function(mySharedService) {
return {


controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {

$scope.message='指令：'+mySharedService.message

});
    },
    replace: true,
    template: '<input>'
};
});
function ControllerZero($scope, sharedService) {
$scope.handleClick = function(msg) {
    sharedService.prepForBroadcast(msg);
};
$scope.$on('handleBroadcast', function() {
    $scope.message = sharedService.message;
});
}