cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - You can Bookmark boards, posts or articles that you'd like to access again easily! X

How to call a function from another view?

chunyul
6-Contributor

How to call a function from another view?

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.

 

 
ACCEPTED SOLUTION

Accepted Solutions

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)
}
...

 

View solution in original post

2 REPLIES 2

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.
 


Announcements

Top Tags