Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

How can I call some directive from Controller after success ajax request?

For example if I have function:

function successAjax()
{
   call directive
}

and if I have in template:

<directive></directive>

there should appear:

<p>success</p>
share|improve this question
    
In your directive, are you using inherited scope or isolate scope? For more informations on directive scopes, see AngularJS $compile service API Reference -- scope. – georgeawg Feb 10 at 22:03
up vote 2 down vote accepted

You have a few choices to go the way you want. If I were you, I would instead move your AJAX call into your directive to sidestep the issue entirely (even better: move the AJAX call to a service that gets injected into the directive):

angular.module('app').directive('directive', [
    '$http',
    function($http) {
        return {
            link: link,
            scope: {}
        };

        function link(scope, elem, attrs) {
            scope.doAjax = doAjax;

            function doAjax() {
                $http.get('url').then(function() {
                    elem.append('<p>success</p>');
                });
            }
        }
    }
]);

If you absolutely have to have the AJAX call in your controller, you can use events, but you should be sparing with these as they will clog up the digest loop:

// Controller
function doAjax() {
    $http.get('url').then(function() {
        $scope.$broadcast('some.event.descriptor');
    });
}

// Directive
function link(scope, elem, attrs) {
    scope.$on('some.event.descriptor', function() {
        elem.append('<p>success</p>');
    });
}

Another option you have is to bind some data from the controller to your directive:

// Controller
$scope.someData = '';
$http.get('url').then(function() {
    $scope.someData = 'success';
});

<!-- Controller Template -->
<directive data-something="someData"></directive>

// Directive
function() {
    return {
        scope: {
            something: '='
        }
    };
}

<!-- Directive Template -->
<p>{{ something }}</p>
share|improve this answer
1  
Honestly, I'd keep http requests in services. – Leo Feb 11 at 1:12
    
I am using service to make ajax request and I call it service from controller, what is the best way to handle this? – Vladimir Djukic Feb 11 at 13:43
    
@VladimirDjukic still, from the directive's point of view the data will need to flow from the controller. If it really is as simple as just trying to display a string, you could follow the third approach as probably the easiest, but I would encourage you to figure out how to move that service call into your directive since it obviously depends on it happening – watcher Feb 11 at 14:53
    
I decided to try 3. option but have some problems: stackoverflow.com/questions/35342493/… could you help me? – Vladimir Djukic Feb 11 at 14:57

You should create another service, on which you will set a value to notify that the request has been completed. Then in your directive, you'll watch over the variable in that service and display the message in your directive's template with ng-if

share|improve this answer

First i don't feel any need of showing success message after ajax call using directive. Angularjs has used $q service to deal with http calls and return promise object and handle that in your controller, after that you can bind the success message to your view from controller scope.

If you want to trigger directive from controller your can use $broadcast to send event to entire $rootScope and handle that in your directive.

Example:

$rootScope.$broadcast('myFunction',{});

In Directive:

scope.$on('myFunction',function(event, data){
  // Do what ever you want to do
});

This would be hopefully help you. Thanks.

share|improve this answer
    
From the 3 possibilities given from @watcher, this one is the badest one. Especialy on the $rootScope. this is fine only if you have some listeners spreaded over the app. – gr3g Feb 10 at 22:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.