Can Update Factory From Controller But Not From Directive

I'm trying to create a Modal module that can be called from anywhere in the app but I've come across a problem that probably highlights a misunderstanding on my part but I can't se

Solution 1:

You should inject your services where you declare your directive, not in the link function. The third parameter in a link function are the element's attributes.

.directive('logout', function(ModalAPI){
    return{
        restrict: 'E',
        link: function($scope, element) {
            element.bind('click', function(){
                ModalAPI.open('After directive click')
            })
        }
    }
})

Solution 2:

The bind event is outside of Angular's scope. Angular doesn't know that the event has been fired.

Therefore, you have to wrap your call in an $apply function:

$scope.$apply(function(){
  element.bind('click', function(){
    ModalAPI.open('After directive click')
  })
});

Further reading: $scope