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>
-
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– georgeawg2016-02-10 22:03:10 +00:00Commented Feb 10, 2016 at 22:03
Add a comment
|
3 Answers
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>
4 Comments
Leo
Honestly, I'd keep http requests in services.
Vladimir Djukic
I am using service to make ajax request and I call it service from controller, what is the best way to handle this?
Jeff Lambert
@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
Vladimir Djukic
I decided to try 3. option but have some problems: stackoverflow.com/questions/35342493/… could you help me?
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
Comments
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.
1 Comment
gr3g
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.