AngularJS: set $scope property in callback function

Question

I'm trying to use AngularUI directive calendar and set its source in callback function in my own directive (so basically I wrap directive into directive).

So use of my directive in html is:

<calendar><calendar>

I have this template form my wrapping directive (calendar.html):

<div class="row-fluid" >
 <div data-ui-calendar="{height: 450,editable: false}" class="span8 calendar" data-ng-model="events"></div>
</div>

And declared this directive:

.directive('calendar', ['calendarFct', function(calendarFct) {
    return {
        restrict: 'E',
        templateUrl: 'partials/directives/calendar.html',
        link: function(scope, element, attrs) {
             var mainScope = scope;
             // load data from server
             calendarFct.getEvents(function(data) {
                 mainScope.events = data; // DOESN'T WORK
              });

             mainScope.events = data; // this would work, but I don't have "data" here
         }
     };

So the problem is I'm trying to set scope.events in the callback function but it doesn't show anything in browser (but the code in callback function is executed). If I try it outside the callback, it would work but I have to load data from server first... How to make it work? I would think that the trick with mainScope would work or even directly scope.events but nope. Thanks

It looks like some issue with AngularUI's fullcalendar. I tried to change the directive template to simple input box and changed value binded with ng-model in the callback function and it worked fine

ladar · Accepted Answer · 2013-02-03 19:45:11Z

1

I'm not a fan of answering own questions, but it took me a lot of nerves and solution is not quite "obvious". I used to have AngularUI v.0.3.0. So I updated to 0.3.2 and problem is gone :/

answered Feb 3, 2013 at 19:45

ladar

5,8864 gold badges29 silver badges39 bronze badges

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

Comments

Shai Reznik - HiRez.io · Accepted Answer · 2013-02-03 17:37:56Z

0

Try doing

scope.$apply(function(){
  mainScope.events = data;
});

answered Feb 3, 2013 at 17:37

Shai Reznik - HiRez.io

9,0082 gold badges37 silver badges34 bronze badges

1 Comment

ladar Over a year ago

Unfortunately, that throws exception: Error: $digest already in progress at Error (<anonymous>) at beginPhase (app/lib/angular/angular.js:8067:15)

Collectives™ on Stack Overflow

AngularJS: set $scope property in callback function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related