AngularJS calling service from custom directive

Question

I have the following directive, service and controller inside my AngularJS app. The service is common between the directive and this controller (as well as other controllers using the same service in my app). As shown inside the controller I watch the service for changes, while in directive I communicate with the service to update it. For some reason which I don't know the directive is not updated my service, so can someone please tell me what I am doing wrong here? Thanks

Controller:

 myapp.controller('ClientsCtrl', function ($scope, UserSvc) {
     $scope.showForm = UserSvc.frmOpened;
     $scope.$watch(function () {
         return UserSvc.frmOpened;
     }, function () {
         $scope.showForm = UserSvc.frmOpened;
         console.log('Changed...  ' + $scope.showForm);
     });
 });

Service

myapp.factory('UserSvc', function ($log, $q, $http) {
    return {
        frmOpened: false
    };
});

Directive:

myapp.directive('myDirective', ['UserSvc', function (UserSvc) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            angular.element(element).on("click", function () {
                var parentElement = $(this).parent();
                if (parentElement.hasClass('sample')) UserSvc.frmOpened = true; //This code never update the service
            } else {
                UserSvc.frmOpened = false; //This code never update the service
            }
            return false;
            });
    }
};
}]);

tasseKATT · Accepted Answer · 2014-04-24 14:41:08Z

1

.on() is a jQuery method (also included in Angular's jqLite). The code inside the attached event handler lives outside of Angular, so you need to use $apply:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

For example:

element.on("click", function() {

  var parentElement = $(this).parent();

  scope.$apply(function() {
    if (parentElement.hasClass('sample')) {
      UserSvc.frmOpened = true;
    } else {
      UserSvc.frmOpened = false;
    }
  });

  return false;
});

Demo: http://plnkr.co/edit/mCl0jFwzdKW9UgwPYSQ9?p=preview

Also, the element in the link function is already a jqLite/jQuery-wrapped element, no need to perform angular.element() on it again.

edited Apr 24, 2014 at 14:41

answered Apr 24, 2014 at 14:24

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

2 Comments

MChan Over a year ago

Thanks a lot, it works now but there is a lag (like 1-2 second but quite noticeable) between the time I click on the button with directive and the form showing based on changes to the controller showForm, so do you happen to know if this is due to using watch with ng-show to monitor changes to showForm or is it due to apply or the whole structure itself? Thanks

tasseKATT Over a year ago

Sorry, really hard to say without seeing all the code that is involved.

Kjell Ivar · Accepted Answer · 2014-04-24 14:23:13Z

It looks like you have some brackets where they shouldn't be in your directive. You don't have brackets surrounding the first part of your if statement, but you have a closing bracket before your else. I think this messes up things.

Try using this as your link-function and see if it changes anything:

link: function (scope, element, attrs) {
            angular.element(element).on("click", function () {
                var parentElement = $(this).parent();
                if (parentElement.hasClass('sample')) {
                    UserSvc.frmOpened = true; //Surrounded this with brackets
                } else {
                    UserSvc.frmOpened = false;
                }
                return false;
            });
        }

Collectives™ on Stack Overflow

AngularJS calling service from custom directive

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related