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 http://stackoverflow.com/questions/16839259/angular-calling-controller-function-inside-a-directive-link-function-using — dYale, May 05 '16 at 17:25

score 2 · Answer 1 · answered May 05 '16 at 17:25

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 05 '16 at 17:25

Pratik Bhattacharya

3,596
2
32
60

That did not work.... It did not go inside the method after I changed it to $scope instead of viewModel..... – sagesky36 May 05 '16 at 17:31
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? – Pratik Bhattacharya May 05 '16 at 17:33
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. – sagesky36 May 05 '16 at 17:57
Where have you used your download directive in the HTML? – Pratik Bhattacharya May 06 '16 at 08:45

Mike Feltman · Answer 2 · 2016-05-05T18:01:09.120

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 05 '16 at 18:01

answered May 05 '16 at 17:48

Mike Feltman

5,160
1
17
38

Execute a javascript function within a controller from a directive

2 Answers2