How can I call the JS function which is defined in subpage? - angularjs

Question

In angularjs,I use the directive to contains the subpage into mainpage.
However, I found when I want to call the JS function in subpage, the browser always return back the information .
I wonder what can I do to fixed the errors.
Mainpage
var menuModule = angular.module('menuModule',[]);
menuModule.controller("MenuSettingController", function($scope, $http) {
initTree();
});
Subpage
<script type="text/javascript">
function initTree(){
console.log("in");
}
</script>
Thanks a lot.

Answer 1

If you want to call a function which are defined in subpage, you can wrap it into the current window object. Moreover, you can also wrap object into your window object.
Then, you can call your function, into your controllers for example.
Wrap function
Controller
(function(){
function Controller($scope) {
initTree();
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
Subpage
<script type="text/javascript">
(function(){
function init(){
console.log('init');
}
//Wrap our init function into our window object
window.initTree = init;
})();
</script>
Wrap object
But, as i said, you can wrap object to the window object, so you can do :
Controller
(function(){
function Controller($scope) {
//Call our init function
app_function.init();
//Call our setter
app_function.set(42);
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
Subpage
<script type="text/javascript">
//initialize our anonymous function with the app_function or an empty object
(function(app){
function init(){
console.log('init');
}
function set(n){
console.log('Set value : ' + n);
}
//Register our function
app.init = init;
app.set = set;
})(window.app_function = window.app_function || {});
</script>
Use angular services
Use angular services is a good practice, it will make your code more reusable and clean.
You have to know that all angular services are singletons. So, you can easily share common logic, data between controller.
Controller
(function(){
function Controller($scope, Service) {
//Call our init function
Service.init();
//Call our setter
Service.set(42);
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
(function(){
function Controller2($scope, Service) {
var old = Service.get();
//Retrieve 42
console.log(old);
//Call our init function
Service.init();
//Call our setter with new value
Service.set(++old);
var newValue = Service.get();
//Retrieve 43
console.log(newValue);
}
angular
.module('app')
.controller('ctrl2', Controller2);
})();
Service
(function(){
function Service() {
var data;
function init(){
console.log('init');
}
function get(){
return data;
}
function set(n){
data = n;
console.log('Set value : ' + n);
}
//Create our object with several method
var factory = {
set: set,
init: init,
get: get
};
return factory;
}
angular
.module('app')
.factory('Service', Service);
})();