not able to call a function defined in directive into my controller

Question

(function () {
    'use strict';

    angular
        .module('app')
        .directive('documentList', documentList);

    documentList.$inject = ['$window'];

    function documentList($window) {
        var directive = {
            restrict: 'E',
            controller: controller,
            controllerAs: "dl",
            templateUrl: 'directives/document/document-list.html',
            transclude: false,
            scope: {
                productRef: "=",
                productSerialNumber: "=",
                title: "@",
                eid: "@"
            },
        };
        return directive;

        function controller($scope, $state, $element, documentService, ngProgressFactory, registrationService) {

            var self = this;
                self.goToDetailPage=goToDetailPage;
               function goToDetailPage(docId) {

                   return "a";
                }


})();


(function() {
    'use strict';

    angular
        .module('app')
        .controller('DetailCtrl', detailCtrl);

    // Implementation of controller 
    detailCtrl.$inject = ['$scope', '$state', '$stateParams', '$rootScope'];

    function detailCtrl($scope, $state, $stateParams, $rootScope) {
       var self=this; 
       //alert($stateParams.docId)
       self.a=$scope.dl.goToDetailPage();
    }

})();

Above is the code in my directive and I have a controller where I want to call goToDetailPage function . But when I am trying to access it through var a=$scope.goToDetailPage() , I am getting error in console. Not able to rectify. Any help is appreciated!!! Thanks

 //DetailPage
        .state('app.sr.detail', {
            name: 'detail',
            url: '/detail',
            templateUrl: 'views/detail/detail1.html',
            controller: 'DetailCtrl',
            controllerAs: 'vm'
        })

Where is the code that is calling $scope.goToDetailPage()? Note that goToDetailPage() is defined on dl, not $scope, but depending on where that code is, it could be $scope.dl.goToDetailPage() dl.goToDetailPage(), or not accessible. — Amy Blankenship
– Amy Blankenship, Commented Feb 10, 2016 at 17:16
I have modified the code , it is getting called in DetailCtrl — shreyansh
– shreyansh, Commented Feb 10, 2016 at 17:45
Is detailCtrl parent of the documentList directive? HTML code usage would help know the problem. — Narain Mittal
– Narain Mittal, Commented Feb 10, 2016 at 17:51

Jesse Carter · Accepted Answer · 2016-02-10 18:21:37Z

1

A cool pattern you can use when you want to be able to invoke a function that lives in a directive but you need to be able to invoke from your controller is to pass in an object using two way binding and then extend that object with a function inside the directive. Inside your directive pass in an additional value:

scope: {
    productRef: "=",
    productSerialNumber: "=",
    title: "@",
    eid: "@",
    control: '=', // note that this is passed in using two way binding
}

Then extend that object inside your directive's controller by attaching a function to it:

// this is in your directive's controller
$scope.control.goToDetailPage = function() {
    // function logic
}

Now define the control object in your Controller and pass it into the directive. Because it is two way bound the function will be applied and available to be called in either scope.

// in your controller, assuming controller as syntax
var vm = this;
vm.control = {};

// somewhere later you can invoke it
vm.control.goToDetailPage();

answered Feb 10, 2016 at 18:21

Jesse Carter

21.3k8 gold badges71 silver badges105 bronze badges

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

1 Comment

arqam Over a year ago

What should be passed in the directive html tag?

Chara · Accepted Answer · 2016-02-10 17:57:16Z

0

Maybe try,

$scope.goToDetailPage = function (docId) {
      return "a";
}

Or, to make use of the "controller as" syntax,

var a = dl.goToDetailPage();

edited Feb 10, 2016 at 17:57

answered Feb 10, 2016 at 17:18

Chara

1,07511 silver badges22 bronze badges

Comments

Narain Mittal · Accepted Answer · 2016-02-10 19:09:45Z

0

As it looks like from the snippets, DetailCtrl is parent of documentList directive. Functions in a child scope can't be accesses from parent controller. Consider defining goToDetailPage in DetailCtrl and inject that into the directive's scope using '&'

EDIT If you have something like this:

<div ng-controller="DetailCtrl">
    <document-list ...></document-list>
</div>

Then the controller DetailCtrl 's scope is the parent scope and the documentList directive's is the child. And since you are defining an isolate scope in documentList directive using scope: {...} parent and child scopes are different. And a method defined in the isolate scope can't be accessed directly in the parent scope using $scope.methodName().

You can however do the other way around, i.e. define the method in the DetailCtrl and inject into the directive's scope using this:

<div ng-controller="DetailCtrl">
    <document-list .... detail-page="goToDetailPage()"></document-list>
</div>

And change your directive's scope to:

scope: {  ...,
         detailPage:'&'
        },

Now you can make a call to the function in the directive controller by calling detailPage()

See the Angular Guide

Hope that helps

edited Feb 10, 2016 at 19:09

answered Feb 10, 2016 at 18:13

Narain Mittal

1,16011 silver badges26 bronze badges

1 Comment

shreyansh Over a year ago

What is meant by parent of, can you please be more clear on it, because I am new to angularJS

Collectives™ on Stack Overflow

not able to call a function defined in directive into my controller

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related