Question

只是一个简单的例子说清楚：在此示例中，如何在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);
            ...
          }
    }]);

任何帮助将不胜感激！

Answer 1

您需要使用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;

}]);

Answer 2

问题是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，我认为这是最简单的方法。如果没有，则存在其他解决方案

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

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

3 个答案: