CODEWITHSUNDEEP
javascriptangularjs
sagesky36
sagesky36

Reputation: 4692

Execute a javascript function within a controller from a directive

I need to execute a javascript function that resides inside a controller. I need to call the function from within a directive.

The arguments I'm passing are fine. My method name in the controller is "GetAttachments".

When I'm debugging, and using scope, the method name GetAttachments doesn't appear.

Can someone please help me to be able to execute the named function?

Here is my directive. I need to know the proper syntax of the line: scope.GetAttachments(attrs.downloadType, attrs.downloadId). Note that my arguments are fine...

.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)
            }

        }
    }
}])

Here is my JS function inside the controller:

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)
        {

Here is the 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>

Upvotes: 4

Views: 91

Answers (2)

Mike Feltman
Mike Feltman

Reputation: 5176

You might want to consider raising an event in your directive using something like:

$rootScope.$broadcast('myEventHappened');

And then in your controller listen for it with something like:

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

This approach will keep you from tightly coupling your directive to your controller.

Upvotes: 2

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

You need to expose your function GetAttachments in the controller via the scope.

Instead of

viewModel.GetAttachments = function (CheckID, FileID)

try this:

$scope.GetAttachments = function (CheckID, FileID)

However please note that this will work only if the directive and the controller is sharing the scope (which I think is the case on your code). However if you want to use isolated scope (for better modularity and re-usability) of the directive , then you will have to pass a reference of the method (in your controller) to the directive's scope using '&' binding.

Take a look at this fiddler here for a demo of isolated scope and calling function in controller from directives

Upvotes: 2

Related Questions