How to access variable calculated in other js file?
Question
Just a simple example make it clear: In this example how can I use the calculated machineLength in angularApp.js? For now, it output an empty object, not the calculated in the 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);
...
}
}]);
Any helps will be appreciated!
3 answers
solution1
1 2016-12-08 08:49:54
You need to use 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;
}]);
solution2
1 ACCPTED 2016-12-08 08:52:13
The problem is angularApp.js uses an asynchronous ajax call, and the script in your main page prints machineLength before the response arrives.
One solution would be for your angularApp script to inform the script in your main page when the response arrives. In 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
...
Main page:
<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>
Note: I think this would be the easiest method to implement if you have access to modifying angularApp.js . If not, others solutions exist
solution3
1 2016-12-08 19:28:15
Inject $window and use that:
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);
...
}
});
I don't recommend using either the global object or $rootScope for storing values but it will work.
Instead, I recommend using a value provider:
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);
...
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.