Execute a javascript function within a controller from a directive

Question

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>

Possible duplicate of stackoverflow.com/questions/16839259/… — dYale
– dYale, Commented May 5, 2016 at 17:25

Pratik Bhattacharya · Accepted Answer · 2016-05-05 17:25:24Z

2

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

answered May 5, 2016 at 17:25

Pratik Bhattacharya

3,7562 gold badges37 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sagesky36 Over a year ago

That did not work.... It did not go inside the method after I changed it to $scope instead of viewModel.....

Pratik Bhattacharya Over a year ago

Then I think your directive and controller are not sharing the same scope. Can you try using isolated scope? And can you show your HTML?

sagesky36 Over a year ago

I included the HTML. There's no need for me to use isolated scope as the parameters I'm passing to the function are accessible via the attrs property.

Pratik Bhattacharya Over a year ago

Where have you used your download directive in the HTML?

Mike Feltman · Accepted Answer · 2016-05-05 18:01:09Z

2

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.

edited May 5, 2016 at 18:01

answered May 5, 2016 at 17:48

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Collectives™ on Stack Overflow

Execute a javascript function within a controller from a directive

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related