I have a directive that has its own controller. See the below code:
var popdown = angular.module('xModules',[]);
popdown.directive('popdown', function () {
var PopdownController = function ($scope) {
this.scope = $scope;
}
PopdownController.prototype = {
show:function (message, type) {
this.scope.message = message;
this.scope.type = type;
},
hide:function () {
this.scope.message = '';
this.scope.type = '';
}
}
var linkFn = function (scope, lElement, attrs, controller) {
};
return {
controller: PopdownController,
link: linkFn,
replace: true,
templateUrl: './partials/modules/popdown.html'
}
});
This is meant to be a notification system for errors/notifications/warnings. What I want to do is from another controller (not a directive one) to call the function show
on this controller. And when I do that, I would also want my link function to detect that some properties changed and perform some animations.
Here is some code to exemplify what I'm asking for:
var app = angular.module('app', ['RestService']);
app.controller('IndexController', function($scope, RestService) {
var result = RestService.query();
if(result.error) {
popdown.notify(error.message, 'error');
}
});
So when calling show
on the popdown
directive controller, the link function should also be triggered and perform an animation. How could I achieve that?
This question is related to
javascript
jquery
angularjs
angularjs-directive
You can also use events to trigger the Popdown.
Here's a fiddle based on satchmorun's solution. It dispenses with the PopdownAPI, and the top-level controller instead $broadcast
s 'success' and 'error' events down the scope chain:
$scope.success = function(msg) { $scope.$broadcast('success', msg); };
$scope.error = function(msg) { $scope.$broadcast('error', msg); };
The Popdown module then registers handler functions for these events, e.g:
$scope.$on('success', function(event, msg) {
$scope.status = 'success';
$scope.message = msg;
$scope.toggleDisplay();
});
This works, at least, and seems to me to be a nicely decoupled solution. I'll let others chime in if this is considered poor practice for some reason.
You could also expose the directive's controller to the parent scope, like ngForm
with name
attribute does: http://docs.angularjs.org/api/ng.directive:ngForm
Here you could find a very basic example how it could be achieved http://plnkr.co/edit/Ps8OXrfpnePFvvdFgYJf?p=preview
In this example I have myDirective
with dedicated controller with $clear
method (sort of very simple public API for the directive). I can publish this controller to the parent scope and use call this method outside the directive.
I got much better solution .
here is my directive , I have injected on object reference in directive and has extend that by adding invoke function in directive code .
app.directive('myDirective', function () {
return {
restrict: 'E',
scope: {
/*The object that passed from the cntroller*/
objectToInject: '=',
},
templateUrl: 'templates/myTemplate.html',
link: function ($scope, element, attrs) {
/*This method will be called whet the 'objectToInject' value is changes*/
$scope.$watch('objectToInject', function (value) {
/*Checking if the given value is not undefined*/
if(value){
$scope.Obj = value;
/*Injecting the Method*/
$scope.Obj.invoke = function(){
//Do something
}
}
});
}
};
});
Declaring the directive in the HTML with a parameter:
<my-directive object-to-inject="injectedObject"></ my-directive>
my Controller:
app.controller("myController", ['$scope', function ($scope) {
// object must be empty initialize,so it can be appended
$scope.injectedObject = {};
// now i can directly calling invoke function from here
$scope.injectedObject.invoke();
}];
Source: Stackoverflow.com