Use variable from directive (after http post) in the controller (scope)

Question

I'm having problems to set a variable from the directive and use it in the scope of my controller.

In my directive I have:

function full_calendar($http, $compile) {
    return  {
        restrict: 'A',
        link: function(scope, element, attr) {

            $(document).on('click', '#calendar .fc-toolbar .fc-right .fc-button-group .fc-button', function(){

                var b = $('#calendar').fullCalendar('getDate');
                var calendar_date = b.format('L');

                $http.post('/api/calendar', { date: calendar_date })
                    .success(function (data, status, headers, config) {
                        console.log(data);

                        // place the data in html
                        var item = data.items.item;
                        scope.calendarData = item;  // THIS IS THE VARIABLE I WANT TO SET
                        //scope.$apply();

                    })
                    .error(function(data, status, headers, config) {
                        console.log('error');
                    })
                ;
            });
        }
    };
}

angular.module('formApp')
    .directive('fullCalendar', ['$http', '$compile', full_calendar]);

As you can see I want to set scope.calendarData and use that in my controller. I tried to use scope.$apply(); but that gave me the following error: http://errors.angularjs.org/1.2.16/$rootScope/inprog?p0=%24digest .

In my controller I have:

angular.module('formApp', ['ngAnimate', 'ui.router', 'ui.calendar'])

.controller('formController', function($scope, $http, $compile, uiCalendarConfig) {

    $scope.calendarData = [];

    // ui calender
    $scope.eventSources = [];

    $scope.uiConfig = {
        calendar:{
            height: '100%',
            editable: true,
            header:{
                right: 'prev,next'
            },
            dayClick: function(date, jsEvent, view, resourceObj)
            {
                console.log($scope.calendarData);
            }
        }
    };
});

in the function of dayClick I would like to access the variable. The click function on button is already executed ... . What am I doing wrong?

Are you sure that the scope where your directive is located is the same scope as where the controller is located? This might be prototype inheritance issue, I would suggest that you try using the "dot" notation: http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model — JoseM, Sep 22 '15 at 13:33
And isn't there another way how I can fix this? I'm an angularJS noob ... . — nielsv, Sep 22 '15 at 15:18
The way I mentioned is actually pretty easy in my opinion. Another possibly better way is to pass a function (using '&attr') to your directive and then have your directive call that function. See https://code.angularjs.org/1.3.10/docs/api/ng/service/$compile#-scope- and https://code.angularjs.org/1.3.10/docs/guide/directive#creating-a-directive-that-wraps-other-elements — JoseM, Sep 22 '15 at 16:13
Also, if you could provider a "working" sample on either http://plnkr.co/ or https://jsfiddle.net/ then someone would be able to tell more easily what your issue is — JoseM, Sep 22 '15 at 16:16

Use variable from directive (after http post) in the controller (scope)

0 Answers0