在AngularJS Controller中调用外部函数

时间:2017-05-26 13:41:14

标签: javascript angularjs

我正在寻找运行从REST端点收集数据的外部JS函数,因此需要花费很少的时间来完成。此数据将插入到图表中,但图表会在收集数据之前尝试加载。

外部JS:

function callEndpoint() {
    var sensorID = document.getElementById('sensorList').value;
    $.getJSON('http://193.61.148.125:443/SensorCentral/REST/SensorDataRangeNanos/19455746_3_10?startTs=0&endTs=9000000000000000000',
    function(data) {
        globalData = data;
     });
}

我的root.js:

angular.module('root',['AngularChart'], function( $routeProvider, $locationProvider ){
    $routeProvider.when('/',{
        template: '<chart title="Bedroom Sensors" xData="lineChartXData" yData="lineChartYData" xName="Month" yName="Activations" subtitle="Sensor Usage"></chart>',
        controller:  MainCtrl
        })
})

我尝试使用服务:

angular.module('root',['AngularChart'], function( $routeProvider, $locationProvider ){
        service('myService', function() {
            this.callAlert = function() {
              callEndpoint();
        }});
    $routeProvider.when('/',{
        template: '<chart title="Bedroom Sensors" xData="lineChartXData" yData="lineChartYData" xName="Month" yName="Activations" subtitle="Sensor Usage"></chart>',
        controller: MainCtrl
        })
})

编辑:

我通过globalData中的函数调用(popGraph())访问MainCtrl

function MainCtrl($scope, $http){
    callEndpoint();
    var data = {"xData": ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat","Sun"],"yData":[{
        "name": "Door",
        "data": [7.0, 6.9, 9.5, 14.5, popGraph(), 21.5, 25.2]
    }, {
        "name": "Drawer",
        "data": [2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8]
    }, {
        "name": "Cupbaord 1",
        "data": [9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6]
    }, {
        "name": "Cupboard 2",
        "data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
    }]}        
    $scope.lineChartYData=data.yData
    $scope.lineChartXData=data.xData
}

1 个答案:

答案 0 :(得分:0)

如果在主脚本中定义函数而不使用闭包,则函数实际上绑定到JavaScript中的window对象。 因此,在您的代码中,您始终可以调用:

console.log(window.callEndpoint);

这将在控制台中显示您的功能。 同样,这假设您的脚本已插入页面中,并且您没有用于更改范围的闭包。

然后从角度路由中,您可以轻松使用解析块:

$routeProvider.when('/',{
        template: '<chart title="Bedroom Sensors" xData="lineChartXData" yData="lineChartYData" xName="Month" yName="Activations" subtitle="Sensor Usage"></chart>',
        controller:  'MainCtrl',
        resolve: {
           myData: function() {
             return window.callEndpoint().then(function(data) { return data; });
           }
        }

        })

然后在你的控制器内部MainCtrl注入myData,你应该在init上准备好你的数据。

以这种方式更改获取数据的功能:

function callEndpoint() {
    var sensorID = document.getElementById('sensorList').value;

 return 
 $.getJSON('http://193.61.148.125:443/SensorCentral/REST/SensorDataRangeNanos/19455746_3_10?startTs=0&endTs=9000000000000000000').then(function(data) {
    function(data) {
        return data;
     });
  })
}