Community Tip - You can Bookmark boards, posts or articles that you'd like to access again easily! X
Hi, I would like to call functions from other views?
For example, I have this code in view1:
$scope.popup = function(){
$scope.app.params.test = 'popup';
};
$scope.gif = function(){
$scope.app.params.test = 'gif';
};
How do I use this function in view2?
thank you for all your assistance.
Solved! Go to Solution.
Hi @chunyul ,
so far I know the $scope definition is local for the specific view . Only functions defined on the view $scope are visible for all widget of the view.
What I think here is that you can define a function in the rootscope :
$scope.testV = function () {console.log("TESTV")}
this definition above is local only for the particular view
$rootScope.testVR = function () {console.log("TESTVR")}
This definition above is now global and could be used in all views but not in widget events - there is only the $scope definition visible. but you can use it embedded in a code
e.g. in a second view:
$scope.testSecondView=function() {$rootScope.testVR();}
now you can call testSecondView(); in the widget event of the second view
Another way to pass functions is via variables. So you can set the function definition to application parameter
Example for the definition in the Home.js view:
$scope.testV = function () {console.log("TESTV")}
$scope.app.params["VIEWFUNC"]=$scope.testV.toString();
and then the usage in the second view is:
$scope.testV=function ()
{ var s= "var func="+ $scope.app.params["VIEWFUNC"];
eval(s);func();}
now the testV() funciton in the sceond view will call the testV definiton from first view
... But all this mention approaches above could be used but are not really clean.
I think if you see that you need some functions twice or more times then you could define these functions in an extra file and load it in the <view.js>
example:
$scope.$on('$ionicView.beforeEnter', function() {
$scope.testLoad();
});
...
....
$scope.testLoad= function()
{
$scope.loadjscssfile("app/resources/Uploaded/style.css", "css")
$scope.loadjscssfile("app/resources/Uploaded/test.js", "js")
}
//--------------------------------------------------------
//this is utility function to load the style or javaScript
//--------------------------------------------------------
$scope.loadjscssfile= function(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
...
Hi @chunyul ,
so far I know the $scope definition is local for the specific view . Only functions defined on the view $scope are visible for all widget of the view.
What I think here is that you can define a function in the rootscope :
$scope.testV = function () {console.log("TESTV")}
this definition above is local only for the particular view
$rootScope.testVR = function () {console.log("TESTVR")}
This definition above is now global and could be used in all views but not in widget events - there is only the $scope definition visible. but you can use it embedded in a code
e.g. in a second view:
$scope.testSecondView=function() {$rootScope.testVR();}
now you can call testSecondView(); in the widget event of the second view
Another way to pass functions is via variables. So you can set the function definition to application parameter
Example for the definition in the Home.js view:
$scope.testV = function () {console.log("TESTV")}
$scope.app.params["VIEWFUNC"]=$scope.testV.toString();
and then the usage in the second view is:
$scope.testV=function ()
{ var s= "var func="+ $scope.app.params["VIEWFUNC"];
eval(s);func();}
now the testV() funciton in the sceond view will call the testV definiton from first view
... But all this mention approaches above could be used but are not really clean.
I think if you see that you need some functions twice or more times then you could define these functions in an extra file and load it in the <view.js>
example:
$scope.$on('$ionicView.beforeEnter', function() {
$scope.testLoad();
});
...
....
$scope.testLoad= function()
{
$scope.loadjscssfile("app/resources/Uploaded/style.css", "css")
$scope.loadjscssfile("app/resources/Uploaded/test.js", "js")
}
//--------------------------------------------------------
//this is utility function to load the style or javaScript
//--------------------------------------------------------
$scope.loadjscssfile= function(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
...
Even I loaded an extra JavaScript file, I don't know how to use actually using external function.
But the global way is working.
Thank you very much.