isolated scope directive doesnt react to change : angularjs

Question

i have created a directive

adocsModule.directive('modalFooter', function (globalService) {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            'onSave': '&',
            'onClose': '&',
            'loading': '='
        },
        template: '<div class="modal-footer">' +
                 ' <div class="pull-right">' +
                 '<button type="submit" ui-ladda="loading" class="button-save ladda-button" ng-click="onSave()" data-style="expand-right">' +
                 '<span class="ladda-label">{{saveText}}</span>' +
                 '</button>' +
                 ' <button class="button-cancel" ng-click="onClose()">{{cancelText}}</button>' +
                 ' </div> </div>',
        link: function (scope, element, attrs, ctrl) {

            scope.saveText = attrs.savetext;
            scope.cancelText = attrs.canceltext;
        }
    };
});

to use this

<modal-footer loading="administrator.loading" on-save="administrator.save()" on-close="administrator.cancel()"></modal-footer>

in my controller when i press save i do . administrator.loading = true it shows loading icon but when on callback i do administrator.loading = false it doesnt stop loading icon. it means it doesnt react to change

i have tried to use scope.$watch and attrs.$observe but problem with those it start showing loading icon on start and it doesnt get back in watch :S

Module.controller('AdminstratorController', ['$scope', function ($scope) {
administrator.save = function () {                   
                        administrator.loading = true;
                        var callback = function () { 
                           administrator.loading  false;                           
                        }

                            setTimeout(function () {
                                administratorService.updateAdministrator( callback);
                            }, 1000);

                };
}]);

can some one guide me how can i fix it.

You need to pass in form.$valid and administrator from the modalFooter? — PSL
– PSL, Commented Sep 2, 2014 at 19:02
i m passing controller property administrator.loading = true that i set to false when i get ajax result so this property gets changed in controller but my directive doesnt see the change and doesnt react to it even i have used attrs.$observe — Salman
– Salman, Commented Sep 2, 2014 at 19:05
Where is your ajax and place where you are setting it to false? Also when you click on save(ng-click="onSave()") Do you see your controllers save function not getting any arguments? — PSL
– PSL, Commented Sep 2, 2014 at 19:06
but you sure what at the first time when your directive works you getting loading value ? — Narek Mamikonyan
– Narek Mamikonyan, Commented Sep 2, 2014 at 19:07
You need to use $timeout instead of setTimeout. ('AdminstratorController', ['$scope','$timeout', function ($scope, $timeout) { and $timeout(function () {administratorService.updateAdministrator(callback);}, 1000); When you update something inside setTimeout angular does not know about it until the next digest cycle happens. If you use $timeoutdigest cycle will happen. Also how does your ajax call look like and why do you need a timeout with 1sec?Are you not using $http ? — PSL
– PSL, Commented Sep 2, 2014 at 19:24

PSL · Accepted Answer · 2014-09-02 19:36:22Z

1

Your issue could be the setTimeout, you are updating a scope variable inside setTimeout, it will not trigger digest cycle so you will not see the update until the next digest cycle happens. Wrap your call within the angular version of timeout, i.e $timeout, using that will trigger the digest cycle after the timeout it done.

    Module.controller('AdminstratorController', ['$scope', '$timeout', function ($scope, $timeout) {
       administrator.save = function () {                   
            administrator.loading = true;
            var callback = function () { 
              administrator.loading  false;                           
            }

            $timeout(function () {
               administratorService.updateAdministrator( callback);
            });

        };
    }]);

On a side note i am not sure what you are passing around callbacks and using a timeout, if you make use of promises and return an (angular)promise from your updateAdministrator you can chain through them and update your scope variable there and you will no longer need to wrap it in timeout at all.

answered Sep 2, 2014 at 19:36

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

Salman Over a year ago

it was just for testing purpose i have use promises and for ajax i have defined other service and call back called when promised get resolved . thanks for helping me out

PSL Over a year ago

Sure. You could instead do administratorService.updateAdministrator().then(callback) you should be good. :)

Collectives™ on Stack Overflow

isolated scope directive doesnt react to change : angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related