处理角度指令中的父作用域单击

Question

我有一个上传文件的指令。我在我的视图中调用了这个名为"UploadRecords.html"的方法。我在"UploadRecords.html"中有一个名为"上传"的按钮。点击这个按钮，我想调用指令中链接函数中定义的"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') });

Js报价

指令->根控制器

根控制器：

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

指令：

$scope.$emit('go');

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