Question

我需要执行一个驻留在控制器内的javascript函数。我需要在一个指令中调用该函数。

我传递的论点很好。我在控制器中的方法名称是“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)
            }

        }
    }
}])

这是我在控制器中的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

您需要通过示波器在控制器中公开您的函数 GetAttachments 。

而不是

viewModel.GetAttachments = function (CheckID, FileID)

试试这个：

$scope.GetAttachments = function (CheckID, FileID)

但请注意，只有当指令和控制器共享范围时，这才有效（我认为代码就是这种情况）。但是，如果要使用指令的隔离范围（为了更好的模块性和可重用性），则必须使用＆＃39;将方法的引用（在控制器中）传递给指令的范围。＆安培;＆＃39;结合。

看看这个小提琴手here，了解指令中控制器的隔离范围和调用功能的演示

Answer 2

您可能需要考虑使用以下内容在指令中引发事件：

$rootScope.$broadcast('myEventHappened');

然后在你的控制器中用以下内容听取它：

$scope.$on('myEventHappened', function() {});

这种方法可以防止您将指令与控制器紧密耦合。

从指令执行控制器内的javascript函数

2 个答案: