如何访问在其他 js 文件中计算的变量？答案

【问题标题】：How to access variable calculated in other js file?如何访问在其他 js 文件中计算的变量？
【发布时间】：2017-04-23 09:58:46
【问题描述】：

只是一个简单的例子就清楚了：在此示例中，如何在 angularApp.js 中使用计算出的 machineLength？目前，它输出一个空对象，而不是在 angularApp.js 中计算。

<html>
  <head>
    <script src="...">...</script>
    <script>
      let machineLength={};
    </script>
    <script src="angularApp.js"></script>
  </head>
  <body>
    ...


    <script>
      console.log(machineLength);
      // here is a lot of code use machineLength to render scene of models with three.js
      //the machineLength is the render region width, height. length
    </script>
  </body>
</html>

angularApp.js：

  let sliceApp = angular.module('sliceConfig', []);
  sliceApp.
    .controller('sliceConfigController', ['$scope', '$http', function($scope, $http)
    {
        $http.get("http://xxxxx/getSliceConfig")
          .success(function(response)
          {
            $scope.config = [];
            $scope.config.machine_width = machineLength.x = parseFloat(response.config.machine_width);
            ...
          }
    }]);

任何帮助将不胜感激！

【问题讨论】：

angular.value 可能有帮助
@A.J 能否提供更多信息，如何使用 angular.value？谢谢
我目前无法使用笔记本电脑，我可能会在一个小时后发布一个示例。谢谢（目前使用手机进行交流）；）
提前谢谢您。我在等你的信息。

标签： javascript html angularjs variables scope

【解决方案1】：

问题是angularApp.js 使用异步ajax 调用，而您的主页中的脚本在响应到达之前打印machineLength。

一种解决方案是让您的 angularApp 脚本在响应到达时通知主页中的脚本。在 angularApp.js 中：

...
.success(function(response) {
        $scope.config = [];
        $scope.config.machine_width = machineLength.x = parseFloat(response.config.machine_width);
        angularFinishedJob(); // call the script in the main page when job is done
...

主页：

<script>
  console.log(machineLength); // empty object, because angular job didn't finish

  function angularFinishedJob(){  // called from angularApp.js
      console.log(machineLength); // calculated object
      // add code which uses machineLength
  }
</script>

注意：如果您有权修改angularApp.js，我认为这将是最容易实现的方法。如果没有，其他解决方案存在

【讨论】：

是的，这适用于 console.log(machineLength)。但实际上这里有很多代码渲染一个场景，使用 machineLength。如何在分配 machineLength 之前阻止渲染？
将该代码添加到angularFinishedJob()，或者调用从angularFinishedJob()渲染的函数。

【解决方案2】：

你需要使用Providers value recipe

var myApp = angular.module('myApp', []);
myApp.value('m_width', '100'); //some init value

myApp.controller('DemoController', ['m_width', function DemoController(m_width) {

$http.get("http://xxxxx/getSliceConfig")
      .success(function(response)
      {
        $scope.config = [];
        var x = //something from response;
        $scope.$emit('eventName', { width: x });
        ...
      }

}]);

myApp.controller('otherController', ['m_width', function otherController(m_width) {

   $scope.$on('eventName', function (event, args) {
    $scope.message = args.width;
    console.log($scope.message);
   });

   $scope.width = m_width;

}]);

【讨论】：

如果在后续渲染中使用init值，machineLength就是渲染区域的宽度，高度。长度。场景将使用 init 值渲染初始场景，然后当 $http.get 返回时，我必须重新渲染场景。
嗯，这是为了回答您的问题，当您想跨控制器访问变量时。但是你的用例是不同的。对于您的要求，我宁愿使用 $emit 和 $on 监视表达式。
感谢您的时间和信息。你会展示更多关于它的信息吗？

【解决方案3】：

注入 $window 并使用它：

  let sliceApp = angular.module('sliceConfig', []);
  sliceApp.
    .controller('sliceConfigController', function($window, $scope, $http)
    {
        $http.get("http://xxxxx/getSliceConfig")
          .success(function(response)
          {
            $scope.config = [];
            //$scope.config.machine_width = machineLength.x = parseFloat(response.config.machine_width);
            $scope.config.machine_width = $window.machineLength.x = parseFloat(response.config.machine_width);
            ...
          }
    });

我不建议使用全局对象或$rootScope 来存储值，但它会起作用。

相反，我建议使用价值提供者：

  let sliceApp = angular.module('sliceConfig', []);

  sliceApp.value("machineLength", {});
  sliceApp.
    .controller('sliceConfigController', function(machineLength, $scope, $http)
    {
        $http.get("http://xxxxx/getSliceConfig")
          .success(function(response)
          {
            $scope.config = [];
            $scope.config.machine_width = machineLength.x = parseFloat(response.config.machine_width);
            ...
          }
    });

【讨论】：