I have two functions in a html view with ng-init="function1(); function2();".
I need to get a value from function 1 to function 2.
I need to pass the value to that function like this:
function2(val);.
Is there any possible way to do that?
Add a comment
|
2 Answers
Try to wrap all in a single function, like this:
ng-init="init();"
and in your controller:
$scope.init = function(){
var returnValue = function1();
function2(returnValue);
}
Try to avoid to insert complex code in HTML. It's a bad practice and can be avoided by effectively using controllers.
1 Comment
The Odd Developer
Thanks for this.I know it's a bad practice to add init function in the view.At the moment i have to go with this since somebody has developed the application like this.I'm continuing it with existing functions.I can understand your code.But the issue is function 1() is returning data array.So how can i get a specific value from it to pass to my function?
That would result in bad coding practice and difficult to maintain overtime.
Just to answer your question so that you would know before giving you a right approach.
You can do it as ng-init="function2(function1())"
Example (Bad approach)
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.function1 = function1;
vm.function2 = function2;
function function1() {
return 'Hello, ';
}
function function2(param) {
vm.message = param + 'World!';
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<div ng-init="ctrl.function2(ctrl.function1())">
<span ng-bind="ctrl.message"></span>
</div>
</div>
</div>Example (Good approach)
All the initialization should be done in the controller itself and it is preferred not to call ng-init directive as well because it reduces code readability as some invocations are done from the view and some from the controllers the view should only bind the data or format the data to display it to the user.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
init();
function preInit() {
return 'Hello, ';
}
function init() {
var text = preInit();
vm.message = text + 'You!';
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<span ng-bind="ctrl.message"></span>
</div>
</div>Update:
If your function1 is returning an Array then you need to know the index number of the element you want to access.
Check below example here I've hard coded the index in the ng-init directive as 1 you can replace it with the appropriate index number to access the element you want to. If you don't have the index number then try to match it with a key's value by passing the value to the function1 which should return only a property of the matched element from the Array according to your needs.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.function1 = function1;
vm.function2 = function2;
function function1() {
return [
{ id: 1, name: 'Batman' },
{ id: 2, name: 'Superman' },
{ id: 3, name: 'Spiderman' }
];
}
function function2(param) {
vm.message = 'Hello, ' + param + '!';
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<div ng-init="ctrl.function2(ctrl.function1()[1].name)">
<span ng-bind="ctrl.message"></span>
</div>
</div>
</div>My Suggestion: Even if someone else wrote that code, I recommend you to go ahead and change it in order to make it better and easier for you to maintain and add complex logic to it whenever required. For example if you don't have the index number of the element you want to access from the Array and you have to loop through the elements to match it with a particular key/property value then you would need a complex function which is appropriate to be written in the controller itself.
answered Sep 20, 2016 at 8:55
Abdul Mateen Mohammed
1,8841 gold badge13 silver badges21 bronze badges
3 Comments
The Odd Developer
Thanks for this.I know it's a bad practice to add init function in the view.At the moment i have to go with this since somebody has developed the application like this.I'm continuing it with existing functions.I can understand your code.But the issue is function 1() is returning data array.So how can i get a specific value from it to pass to my function?
The Odd Developer
Thanks for that.I'll try to do that way.And may i know actually my relevant value is in a scope variable not in an array.I could figure it out now.Sorry about that.So i think it'll be more easy since it's in a scope variable.Now the problem is since both functions are loading at the same time, second function can't access the first functions values.Is that the reason for this?
Abdul Mateen Mohammed
Are you performing an asynchronous call to an api using $http service in function1 to get the data (Array) and using that data in function2 by using this ng-init="function1(); function2();" code ?