I have a directive with code
seriesClick: function (e) {
//console.log(e.category);
// use scope.$emit to pass it to controller
scope.$emit('feederValue', e.category);
},
In my controller I am using
$scope.$on('feederValue', function (evt, value) {
console.log(value);
$scope.feederFitBoundValue = value;
$scope.getFitBoundForFeederID($scope.feederFitBoundValue);
});
I want to define this function in my different directive
And I want to use it
My code
function getFitBoundForFeederID(feederFitBoundValue){
alert(feederFitBoundValue);
}
I am getting error TypeError: undefined is not a function
My project is in Angular framework I want to use logic of $emit and $on
Please suggest if any optimus solution. I just want to pass value from One directive to different directive. same time I want to pass some value from one directive to another. I want to do event triggering.
An easy fix would be to emit the event on the $rootScope and watching this event on the $rootScope as well, but i'm not sure it's the best way to do that.
To pass value from one directive to another you can use factory to create your service which holds the shared data.
app.factory("sharedDataService", function() {
return {
yourData: "anything"
};
});
Related
Now I'm getting rid of $scope dependency from my angular controller to ensuring that I could easily migrate my code to Angular2. My current angular version is 1.4.X.
While doing the same thing there is place while I placed $destroy listener over my controller scope like $scope.$on('$destory', function() ....).
I can see $on method only available on $scope of controller, but how can I achieve it without using $scope dependency.
If you are using angular 1.5+ they added lifecycle hooks that you can opt into on your controller. No $scope needed. Just add a function called $onDestroy() to your controller and it will be called when your controller is being clean up:
$onDestroy() - Called on a controller when its containing scope is
destroyed. Use this hook for releasing external resources, watches and
event handlers.
Example from http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html:
function MyCmpController($element) {
var clickHandler = function () {
// do something
};
this.$onInit = function () {
$element.on('click', clickHandler);
};
this.$onDestroy = function () {
$element.off('click', clickHandler);
};
}
After some research I found that the $destroy event is emitted while removing DOM & on that same DOM scope it broadcasts $destroy event, but at the same time same that event has been propagated on DOM which is going to be removed.
You know there is one dependency $element, if you inject that in controller will give you the DOM where you have ng-controller directive place. So inject $element inside your controller & then place listener over it like below
$element.on('$destroy', function(){
//write clean up code here
});
Mine solution will work till 1.4.X version. For 1.5.3+ version you
could use Angular lifecycle hook which is $onDestroy like shown by
#pgreen2 in above answer. Thanks :)
I have two controllers in my app TimelineController and ReservationModalController. I want to call TimelineController from ReservationModalController and pass variable value. I'm trying to that:
this is my app.js
$stateProvider
// Timeline
.state('timeline', {
url: '/timeline',
controller: 'TimelineController',
templateUrl: 'assets/partials/timeline.html',
params: {
operation: 'false'
}
})
this is TimelineController
$scope.operation = $state.current.params.operation;
and this is ReservationModalController :
$scope.edit = function() {
$modalInstance.close();
$state.go('timeline', {
operation: 'true'
});
};
At the first time variable is initialized. But when I click the button and ReservationModalController and it's method edit is called TimelineController and it's variable $scope.operation does not change.
Please help me what is wrong?
Probably, you should $broadcast to communicate between controllers here so they are not as tightly bound to each other. $rootScope.$broadcast is sending an event through the application scope.
Any children scope of that app can catch it using a simple: $scope.$on().
It is especially useful to send events when you want to reach a scope that is not a direct parent (like two controllers of which is none a parent for the other for example).
There's a fiddle that shows how to do this: https://jsfiddle.net/VxafF/
You could also try nesting your TimeLineController inside your ReservationModalController. That way you can use $scope inheritance to communicate between controllers.
Read this:http://www.angularjshub.com/examples/basics/nestedcontrollers/
I have an Angular app where I'm using ui-grid. I want to have a custom action on a cell of the grid that calls a method from my app. So basically, this means calling a method that's somewhere up in the parent hierarchy, from a directive.
This would be achieved by calling something like: $scope.$parent.$parent.$parent.$parent.foo(). But that doesn't seem too nice.
One option would be to create a recursive function that goes up the ancestry of the $scope. That's nicer, but still seems a bit weird.
Also... Is it good practice to try to achieve something like this?
You're correct that $parent.$parent.$parent is definitely not a good practice.
If the method you're calling is another directive, you can require that directive in your child directive and then, the parentDirective's controller function will be injected as the fourth parameter to your link function:
In your DDO:
return {
require : '^parentDirective',
restrict : 'E',
link : function (scope, elem, attrs, parentDirectiveController) {}
}
If what you're trying to call is on a factory/service, you can inject that factory/service into your directive, although this sometimes is a code smell, depending on what you're trying to inject.
Finally, another way to do it is to use event propagation. From your directive, you can use $scope.$emit to send information up to parent controllers:
From the directive:
$scope.$emit('directiveDidStuff', {
data : 'blah'
});
In the parent controller:
$scope.$on('directiveDidStuff', function (evt, params) {
this.data = params.data; // equals blah
});
You can achieve the same by using "&" through one of the scope variable in directive.Like this, you can bind your event to the controller method and from the method, you could do your desired things or if the original business logic which you wants to achieve on onClick of the grid is used across many modules than you can bisect it in service and make it reusable and call the service from the event method. Let me know if you do have any doubts with the approach.
Key Code of example:
Html
<my-component attribute-foo="{{foo}}" binding-foo="foo" isolated-expression- foo="updateFoo(newFoo)" >
Directive
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'#attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
}
};
})
Suppose I have a module with a directive as follows (this is a rough not tested)
I need to implement 3 basic things
Configuration for the element that will appear
Event listeners that the base controller can use
Public methods that the base controller can call
angular.module("componentModule",[]) .directive("myComp",function(){
return{
replace:true,
template:'<h2>This is my component</h2>',
scope:{config= "#"},
link:function(scope,element,attr){
this.deleteElement = function(id){
//writing the code to delete this component
//This is a API function that the user can call to delete
}
if (!scope.config.visible){
//this is a configuration object for the element
this.visible(false)}
}
} })
then i have my base HTML like containing the directive call like below
<div myComm="first" config="eleConfig"></myComp>
<div myComm="second" config="newEleConfig"></myComp>
I have a separate controller for my base HTML as follows,
angular.module("baseApp",['componentModule'])
.controller('baseCtrl',function(){
$scope.eleConfig = {
visible:true,
delete:function(e){
//This is called if we call the delete method
}
}
//this is how the delete method is to be called
$scope.first.deleteElement();
})
Question
How to call the deleteElement() method in the baseCtrl as shown above (want to do it the same way KENDO UI does)
The pattern that angular uses is to expose the directive API to the scope. This is how ng-model and ng-form both expose ngModelController and ngFormController APIs.
Here is how I would do it:
angular.module("componentModule",[])
.directive("myComp",function($parse){
return{
replace:true,
scope: {
config: '&'
},
template:'<h2>This is my component</h2>',
controller: function($scope) {
//Directive API functions should be added to the directive controller here or in the link function (if they need to do DOM manipulation)
},
link:function(scope,element, attr, ctrl){
//add to directive controller
if(scope.config().visible) {
//element should be visible, etc.
}
ctrl.deleteElement = function(){
//if this function is called we want to call the config.delete method:
if(scope.config && scope.config.delete) {
//calling the scope.config() method returns the config object from the parent
scope.config().delete(element);
}
}
if(attr.myComp) {
//change to scope.$parent
scope.$parent[attr.myComp] = ctrl;
}
}
}
})
Assuming markup of:
<div my-comp="first" config="configObject"></div>
<div my-comp="second" config="configObject"></div>
In your base controller
$scope.first.deleteElement();
or
$scope.second.deleteElement();
would delete the appropriate element.
UPDATE:
I've updated the directive based on your updated question. You want to pass a config object into the directive. The best way to do that is with an & binding. If you use the & binding, you need to remember that the directive will create a new scope, and you have to attach the controller to $scope.$parent.
In your first requirement, you said you want to write the delete function in the directive, but in the case of KendoUI the actual delete(change) function implementation is done in the base controller and the delete(change) event triggered when the component value changes, which in turn calls the delete function defined in the base controller by the directive.
If you want to implement something like KendoUI does then look at this
link toplunker
Switch on the browser console to see the log. KendoUI component's change event happens automatically when the input element changes but in this case i manually triggered the delete event after 3 seconds.
Consider two nested directives with isolate scopes:
<dctv1>
<dctv2></dctv2>
<dctv1>
If I want dctv2 to talk to dctv1 I have may options:
I may require the controller of dctv1 in the definition of dctv2 using the require:'^dctv1'
I may call an expression on the parent scope with the wrapper <dctv2 callParent="hello()"></dctv2> and scope:{callParent:'&'}
I can also use $scope.$emit in dctv2 but then all parent scopes will hear the message.
Now I want dctv1 to talk to dctv2.
The only way I may accomplish this is to use $scope.$broadcast, but then all children will hear.
By talk to here i mean call a function or similar. Don't want to set up watches clogging the digestloop.
How can I make dctv1 notify dctv2 in the best way, making them loose-coupled? I should just be able to remove dctv2 without errors.
Take a look at AngularJS NgModelController for some ideas.
Each <dctv2> directive would require <dvtv1> to have it's controller injected. You can then add objects or callbacks to properties of that controller, and remove them when <dctv2> is destroyed.
<dvtv1> would not talk directly to children, but would trigger callbacks bound to it's properties.
For example;
NgModelController has $parsers and $formatters that are an array of function callbacks. You push your own functions into the array to extend that controllers behavior.
When NgModelController performs input validation it's basically talking to other directives via these properties.
I would suggest using angular services. That way you can decouple your behavior into one or more services.
Take a look at this also : AngularJS : How to watch service variables?
One way is to make a Service/Factory that will communicate with the controllers that you want.
For example, here's a getter/setter Factory
.factory('factoryName', function () {
var something = "Hello";
return {
get: function () {
return something;
},
set: function (keyword) {
something = keyword;
return something ;
}
};
}])
And then in your controllers:
.controller('controllerOne', ['factoryName', function (factoryName) {
$scope.test = factoryName.get();
}]);
.controller('controllerTwo', ['factoryName', function (factoryName) {
$scope.test = factoryName.get();
$scope.clickThis = function (keyword) {
factoryName.set(keyword);
};
}]);
I suggest reading up on this : Can one controller call another?
You can manage it using an id for each child that have to be passed to the parent; the parent will broadcast back the event using that id: the child will do the action only if the id passed from the parent is the his own.
Bye