处理 Angular 指令中的父范围单击

Question

我有一个上传文件的指令。在我看来，我将其称为“UploadRecords.html”。我在“UploadRecords.html”中有一个名为“Upload”的按钮。单击此按钮时，我想调用在我的指令中的链接函数内定义的“UploadAll”方法。有什么方法可以做到这一点。

基本上我想在单击根范围元素时调用指令函数。

注意：我在指令中使用了隔离作用域

angular.module('fileUpload', [])
.directive(
    "fileUpload",
    function () {
        return ({
            restrict: 'E',
            scope: {                
                onSuccess: '&',
                onError: '&',
            },
            templateUrl: 'Templates/FileUploadTemplate.html',
            link: function (scope, element, attrs) {
                scope.files = [];
                scope.addFile = function (element, documentType) {
                    if (element.files.length > 0) {
                        $.each(element.files, function (index, file) {
                            scope.files.push(file);
                        });
                    }
                    scope.$apply();
                }

                scope.uploadAll = function () {

                    //This is where I upload the files to the web api using a FormData post

                }
            }

        });
    }
    );


<file-upload on-success="onFileUloadAllSuccess()" on-error="onFileUloadAllError()"></file-upload>

<button type="button" class="btn btn-default">Upload All</button>

谢谢， 山姆。

Answer 1

按照您设置 HTML 的方式，您的按钮无法与指令通信，因为它们是完全独立的。您有几个选择：

1. 移动 FileUploadTemplate.html 内的按钮，使其现在位于指令的范围内。如果这样做，您所要做的就是将ng-click="uploadAll()" 添加到属性中：

   全部上传

2. 为您的按钮定义一个指令。然后使用$emit 在两个指令之间进行通信。

3. 为您的按钮定义一个指令。定义一个“父”指令，它有两个孩子，按钮和您当前的模板。这样，两个子级都可以访问父级内部的范围，并且他们可以通过父级进行通信。

这里是您如何使用$emit。将您的按钮 html 定义为：

<button type="button" class="btn btn-default" ng-click="uploadAll()" button-upload>
    Upload All
</button>

现在为此添加一个指令：

app.directive('buttonUpload', ['$rootScope', 
    function($rootScope)
    {
        return {
            restrict: 'A',
            link: function(scope, element, attrs)
            {
                scope.uploadAll = function() {
                    $rootScope.$emit('UPLOAD_ALL');
                }
            }
        }
    }
]);

然后在您的fileUpload 指令中，您可以：

app.directive('fileUpload', ['$rootScope', 
    function($rootScope)
    {
        return {
            // Your restrict, templateUrl, scope
            link: function(scope, element, attrs)
            {
                // All your other code
                // remove scope.uploadAll


                // This will get called everytime $emit is broadcasted
                $rootScope.$on('UPLOAD_ALL', function(event) {
                    // Your upload code goes here
                });

            }
        }
    }
]);

这不是一个非常好的方法：您不应该真正使用$emit 和$broadcast。您应该考虑我的第三个选项，即拥有两个指令的父级。

Answer 2

在我看来，广播可以很好地解决您的问题

你可以这样做：

根控制器 -> 指令

根控制器

$scope.$broadcast('go');

指令

$scope.$on('go', function () { alert('event is clicked') });

JsFiddle

指令 -> 根控制器

根控制器：

$scope.$on('go', function () { alert('event is clicked') });

指令：

$scope.$emit('go');

** 这不一定是最优雅的解决方案，我们同意，但它会解决您的问题