I have a function defined in controller1 and would like to use it in controller2. When I do $scope.functionName() or even $rootScope.functionName() I get this error
TypeError: $scope.functionName() is not a function
It works absolutely fine in controller1 but as expected not in controller2. I do not want to copy and paste an existing function into controller2 to use it. It should be reusable.
Create a service or a factory and put the function in there. Next, make both controllers use the service/factory by injecting it to both controllers.
Use events($on, $broadcast and $emit) to communicate btn two controllers.
Syntax:
$scope.$broadcast("MyEvent",data);
$scope.$emit("MyEvent",data);
$scope.$on("MyEvent", function(evt,data){
// handler code here });
Hope it helps.
Related
I have a controller ctrl which has ctrl.$setValidity() method. I am doing angular.copy(ctrl,ctrlCopy) and I trying to access ctrlCopy.$setValidity() but I got error:
$setValidity is not a function.
I wonder why angular.copy doesn't copy all the $function from an object to another.
You can't angular.copy() a controller... period.
If you want to share a function then create a service that returns the function and inject the service into the two separate controllers
I have a custom scope method within a Controller, and when a custom directive loads, I want to run a method inside the defined controller. I've seen a lot of options, but which one could be referenced inside a template via an ng-* call? Otherwise, what are the best options?
Since the controller is instantiated when the directive is loaded, any method called in your controller will be called on page load. In my code it is often something like
angular.module('app')
.controller('controllerName', ctrl);
function ctrl() {
/*--------Initialize--------*/
someMethod()
}
If you are on angular 1.5 already and can use the new component way to build your custom directive, you could use the newly introduced $onInit method instead of polluting the constructor, that should only initalize the object itself.
For details, please see this blogpost: https://toddmotto.com/on-init-require-object-syntax-angular-component/
i am writing a code in angularjs which loads the controller file as per session demands
i have a separate controller files for admin(let say ctrl1) and for staffs (ctrl2) and one common(ctrlComm) file which can be use any among them,now i want to call function of ctrl1 inside ctrlComm, i do not want to write or paste the file code again,how can i do this.Here is my code.
ctrl1:
customerSupport.controller('studentSheet',['$scope',function($scope){
$scope.searchStudent=function(studentid){
angService.getfromRemote('students/'+studentid)
.success(function(response){
if(response.success){
...
}
})
}
}])
ctrlComm
activities.controller('usersActivites',['$scope',function(){
$scope.studentdetail=function(studentid){
console.log("how can i call the searchStudent if ctrl1 here ??");
$scope.searchStudent(studentid);
}
}])
Sharing a function is a clear sign you need a service.
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
I believe you already have angService in place for this. Inject this service in usersActivites and you are good to go. You can tweak your service to get student details directly. Create some function there like angService.searchStudent and from service return appropriate response.
I am facing a different problem.
According to my code I have a common service where I have written all my functions. I have injected service into 2 different controllers.
Here my Problem is I want to call the function in 2nd controller when common service executing under 1st controller. I am passing $scope variable to common service. so when service working under 1st controller $scope variable refers 1st controller only But I want to change the reference of $scope to 2nd controller..
Thanks
Angular JS - I need to call a function in another controller from an link, which has appended through ajax success function in one controller.
I have the following code in ajax success section in one controller,
var acc_summ = 'Refresh';
angular.element(acc_summ).appendTo('#itemsummeries');
I want to call test() function in another controller.
Thanks in advance
Emit an event in your current controller, and listen to that event in the second one (the one containing the test function). When the event is caught, call the function.
Also, remember that in general is bad practice to manipulate DOM in controllers, it should be done in directives.
Look for $emit, $broadcast and $onin the $scope docs
And see also Can one controller call another?