AngularJs - Get return value of a function

Question

I'm using FullCalendar plugin in a Angular project and trying to alert a value on select method of the plugin.

//Directive
app.directive('calendar', function(){
        return {
            restrict: 'A',
            scope: {
                select: '&'
            },
            link: function(scope, element, attrs) {
                element.fullCalendar({
                    selectable: true,

                    select: function(start, end, allDay) {
                        scope.select(start, end);

                        //alert(start);
                    }
                });
            }
        }
    }) 

app.controller('calendarCtrl', function() {
  this.onSelect = function(arg, arg2) {
    alert(arg + '' + arg2)
  }
});

HTML

<body ng-controller="calendarCtrl as clctrl">
    <div calendar select="clctrl.onSelect()"></div>
</body>

As you can see above in the directive, on selecting a day, I'm passing the onSelect() function which has the alert from controller. I'm trying to alert the first 2 return values(start and end) but I'm getting undefined values.

What is wrong in my code? I would appreciate if you could update plunker.

http://plnkr.co/edit/utxrmH8mYzo5jq9shcej?p=preview

Theres already an directive for the calendar with full implementation: github.com/angular-ui/ui-calendar. You are trying to reinvent the wheel — Fals
– Fals, Commented Jun 15, 2015 at 16:57

simon · Accepted Answer · 2015-06-15 16:50:03Z

3

var app = angular.module('app', []);

//Controller
app.controller('calendarCtrl', function() {

  this.onSelect = function(arg, arg2) {

    alert(arg + ' ' + arg2)

  }

});

//Directive
app.directive('calendar', function(){
        return {
            restrict: 'A',
            scope: {
                select: '&'
            },
            link: function(scope, element, attrs) {

                //Generate the Calendar
                element.fullCalendar({

                    selectable: true,

                    //On Day Select
                    select: function(start, end, allDay) {
                        scope.select({start: start, end: end});

                        //alert(start);
                    }
                });
            }
        }
    })


<div calendar select="clctrl.onSelect(start, end)"></div>

updated plunker

answered Jun 15, 2015 at 16:50

simon

1,48510 silver badges20 bronze badges

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

5 Comments

Sunil D. Over a year ago

Nice job, can you explain why your solution works? I'm not familiar w/FullCalendar. Is putting the arguments inside the object required by Angular or FullCalendar?

simon Over a year ago

You have to pass it as argument in directive and You have to give same exact key in html also. Then only it will work. If it is correct answer please upvote it and approve as answer.

simon Over a year ago

This is nothing to do with FullCalender. This is a Angularjs feature.

Sunil D. Over a year ago

Ok got it. The top part of this answer explains what Angular is doing when you use &. I've used & before, but never noticed this ... guess I wasn't passing args to the function.

simon Over a year ago

Always welcome. Thanks @sunil for giving some good explanation what i did.

Collectives™ on Stack Overflow

AngularJs - Get return value of a function

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related