CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Salman
Salman

Reputation: 1286

isolated scope directive doesnt react to change : angularjs

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.

Upvotes: 0

Views: 214

Answers (1)

PSL
PSL

Reputation: 123739

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.

Upvotes: 1

Related Questions