How to call function in parent controller from directive

Question

I have angular controller and its been split down into a directive.

Inside that directive the original code is attempting to call a function which still resides in the parent controller but it is claiming its not defined so Im assuming theres an issue with scope now.

Currently the code in the directive reads

   setMessageState(false, true, "Problem obtaining statement");

where setMessageState is defined in the main controller - how can I enable this directive to reach out to still call that function.

EDIT: As per request some more code. this is my directive.js

(function () {
'use strict';
//Define the Controller
angular
    .module("tpAccStatus")
    .directive("tpAccStatusTransactionRow", tpAccStatusTransactionRow);

function tpAccStatusTransactionRow() {



    return {
        scope: {
            trans: "=tpAccStatusTransactionRow",
            accountNumber: "="
        },
        restrict: "A",
        replace: true,
        templateUrl: "tpAccStatusTransactionRow.directive.html",
        bindToController: true,
        controller: "tpAccStatusTransactionRowCtrl",
        controllerAs: "transCtrl"
    };
}

})();

with the controller as:

(function () {
'use strict';
//Define the Controller
angular
    .module("tpAccStatus")
    .controller("tpAccStatusTransactionRowCtrl", tpAccStatusTransactionRowCtrl);


//Inject any dependencies.
//We don't need scope injecting as we are using the Controller as Syntax
tpAccStatusTransactionRowCtrl.$inject = ["$scope", "tpAccStatusService", "nsgLogger"];

//Implement the Controller
function tpAccStatusTransactionRowCtrl($scope, tpAccStatusService, logger) {
    //////////////////////// Public Interface //////////////////////////////////////////////

    //Ensure there are no issues with the transient nature of the this pointer in Javascript
    var vm = this;

    vm.busy = false;
    vm.requestStatement = requestStatement;
    vm.documentLocation = "";

    ////////////////////////////////////////////////////////////////////////////////////////

    //Activate the controller to populate the view model with any set up data
    activate();


    ///////////////////////////////////////////////////////////////////////////////////////

    //Retrieve the Administration top Level View Model from the information from the server
    function activate() {

    }



    // get document

    function requestStatement() {
        if (vm.documentLocation != "") {
            window.location = vm.documentLocation;
        }
        else {
            if ((vm.trans.DocumentNumber != null || vm.trans.DocumentNumber != 'none')) {
                vm.busy = true;
                //setBusyState(true);
                return tpAccStatusService
                .requestStatement(null, null, vm.accountNumber, vm.trans.DocumentNumber)
                .then(requestStatementCompleted, requestStatementErrored);
            } else {
                logger.error("No Accounts Selected", "Analysis Statement");
            }
        }

    }

    function requestStatementErrored(error) {
        vm.busy = false;
        setMessageState(false, true, "Problem obtaining statement");
    }

    function requestStatementCompleted(guid) {
        vm.busy = false;

        vm.documentLocation = "/download/" + guid;
        window.location = vm.documentLocation;



    }


}

})();

you can see reference to a function setMessageState() which is held in the parent controller as:

function setMessageState(showSuccess, showError, message) {
        vm.showSuccessMessage = showSuccess;
        vm.showErrorMessage = showError;
        vm.message = message;
    }

Possible duplicate of [AngularJS : Call a Controller Function from a directive without isolated scope](http://stackoverflow.com/questions/17583004/angularjs-call-a-controller-function-from-a-directive-without-isolated-scope) — isherwood, Feb 02 '16 at 14:14
HI - I looked at that previously but that is only calling a function whereas im also setting a value so I dont think that solution fitted my circumstances whereby I have a function that accepts 3 params in the main controller - I need to call that and pass the required params from within the directive — user3779703, Feb 02 '16 at 14:18
Fair enough, but you won't get help based on one line of code. Show the relevant parts of your controller, and the entire directive. — isherwood, Feb 02 '16 at 14:25

score 0 · Accepted Answer · answered Feb 02 '16 at 17:24

It won't work as the function in the parent controller is probably also warped into a function.

What you're trying to do is similar to this. This also does not work.

(function (){
    function hello (){
        console.log("hello");
    }
})();


(function (){
        hello();
})()

The whole idea about an isolated scope is not to relay on anything outside the directive except the stuff that get's passed into the scope via parameters. In your case the trans and accountNumber.

So you got several options.

Either you move you function into a service and inject the service into your directive controller
Pass the function from the parent controller into the scope. I think it is done like this: yourFn = '&'
Or you assign the function of the outer controller to the outer controller's scope and access it in the inner controller via $scope.$parentScope.setMessageState. Actually this is the worst solution as you then don't need an isolated scope at all.

How to call function in parent controller from directive

1 Answers1