如何调用子页面中定义的JS函数？

Question

在angularjs中，我使用该指令将子页面包含在主页中。

但是，我发现当我想在子页面中调用JS函数时，浏览器总是返回信息。 我想知道如何修复错误。

网主页

var menuModule = angular.module('menuModule',[]);
menuModule.controller("MenuSettingController", function($scope, $http) {
    initTree();
});

子页面

<script type="text/javascript"> function initTree(){ console.log("in"); } </script>

非常感谢。

Answer 1

如果要调用子页面中定义的函数，可以将其包装到当前的window对象中。此外，您还可以将对象包装到window对象中。

然后，您可以将您的功能调用到控制器中。例如。

包裹功能

<强>控制器

(function(){

function Controller($scope) {

  initTree();

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

<强>子页面

  <script type="text/javascript">

    (function(){

      function init(){
        console.log('init');
      }
      //Wrap our init function into our window object
      window.initTree = init;

    })();

  </script>

换行对象

但是，正如我所说，你可以将对象包装到window对象，所以你可以这样做：

<强>控制器

(function(){

function Controller($scope) {

  //Call our init function
  app_function.init();

  //Call our setter
  app_function.set(42);

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

<强>子页面

  <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>

使用角度服务

使用角度服务是一种很好的做法，它会使您的代码更具可重用性和清洁性。

您必须知道所有角度服务都是单身。因此，您可以轻松地在控制器之间共享通用逻辑，数据。

<强>控制器

(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);

})();

<强>服务

(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);

})();