javascript - 从指令在 Controller 中执行 javascript 函数

Question

我需要执行驻留在 Controller 内的 javascript 函数。我需要从指令中调用该函数。

我传递的论据很好。我在 Controller 中的方法名称是“GetAttachments”。

当我调试并使用作用域时，方法名称 GetAttachments 没有出现。

有人可以帮我执行指定的函数吗？

这是我的指令。我需要知道该行的正确语法:scope.GetAttachments(attrs.downloadType, attrs.downloadId)。请注意，我的论点很好......

.directive('download', ['$modal', function ($modal)
{
    return {
        restrict: 'E',
        transclude: false,
        replace: true,
        template: '<a style="padding-right: 5px; color:#fff !important;" class="pull-right" href="#" ng-click="opendownload()"><i class="fa fa-files-o fa-lg" style="padding-right: 5px"></i>Download</a>',
        link: function (scope, elem, attrs, controller)
        {
            scope.opendownload = function ()
            {
                $modal.open({
                    templateUrl: root + 'AccountingModule/modal/attachment/download-modal.html',
                    size: 'md',
                    backdrop: true,
                    controller: 'downloadSPDocumentsController as downloadCtrl',
                    resolve: {
                        attributes: function () { return attrs; },
                    }
                });
                scope.GetAttachments(attrs.downloadType, attrs.downloadId)
            }

        }
    }
}])

这是我在 Controller 中的 JS 函数:

module.controller('downloadSPDocumentsController', ['$scope', '$http', '$modalInstance', '$location', '$window', 'attributes',
    function ($scope, $http, $modalInstance, $location, $window, attributes)
    {
        var viewModel = this;
        viewModel.attributes = attributes;

        var DocumentDownloadarr;

        viewModel.GetAttachments = function (CheckID, FileID)
        {

这是HTML

<!--<p>For Testing Purpose: Download Type: {{downloadCtrl.attributes.downloadType}}</p>
<p>For Testing Purpose: ID: {{downloadCtrl.attributes.downloadId}}</p>-->

<div class="modal-header">
    <h3 class="modal-title">File Download</h3>
</div>

<div class="modal-body" cg-busy="{promise:downloadCtrl.promise}">
    <ul ng-init="downloadCtrl.Init()" class="list-unstyled">
        <li ng-repeat="item in downloadCtrl.DocumentDownloadarr">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="text" class="form-control" ng-value="item.FileDescription" ng-readonly="true" />{{item.ExternalDocumentId}}
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-default" ng-click="downloadCtrl.DownLoadAttachment(item.ExternalDocumentId, item.FileDescription)">Download</button>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

<div class="modal-footer">
    <div class=" btn-toolbar pull-right" role="toolbar">
        <!--<div class="btn-group" role="group">
            <button type="button" class="btn btn-default" ng-click="downloadCtrl.GetAttachments(downloadCtrl.attributes.downloadType, downloadCtrl.attributes.downloadId)">List Attachments</button>
        </div>-->
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" ng-click="$close()">Close</button>
        </div>
    </div>
</div>

Answer 1

您需要通过作用域在 Controller 中公开您的函数 GetAttachments。

代替

viewModel.GetAttachments = function (CheckID, FileID)

试试这个:

$scope.GetAttachments = function (CheckID, FileID)

但是请注意，这仅在指令和 Controller 共享范围时才有效(我认为您的代码就是这种情况)。但是，如果您想使用指令的独立范围(为了更好的模块化和可重用性)，则必须使用“&”绑定(bind)将方法的引用(在您的 Controller 中)传递到指令的范围。

看看这个 fiddler here用于从指令在 Controller 中隔离作用域和调用函数的演示