将json传递给角度控制器

时间:2018-05-18 05:35:49

标签: angularjs json controller

我想将json文件或对象传递给角度控制器,以便将其与ng-repeat一起使用。

我的json对象存储在我的i​​ndex.js文件中并写入data.json。我的controller.js文件如下所示:

var fs = require('fs');

var jobs = fs.readFile('out/data.json', 'utf-8', (err, data) => {
    if (err) throw err;
});

angular.module('slrm', [].controller('slrmctrl', function($scope) {
    $scope.data = jobs.data;
}));

那就是我的html文件:

<table class="table">
        <thead>
            <th scope="col">#</th>
            <th scope="col">JOBNAME</th>
            <th scope="col">USER</th>
            <th scope="col">NODE</th>
            <th scope="col">CPUS</th>
            <th scope="col">START</th>
            <th scope="col">STATE</th>
            </thead>
            <tbody ng-app="slrm" ng-controller="slrmctrl">
                <tr ng-repeat="x in data | orderBy : 'JOBID'">
                    <td>{{ x.JOBID }}</td>
                    <td>{{ x.NAME }}</td>
                    <td>{{ x.USER }}</td>
                    <td>{{ x.NODELIST }}</td>
                    <td>{{ x.CPUS }}</td>
                    <td>{{ x.STATE }}</td>
                    <td>{{ x.REASON }}</td>
                </tr>
            </tbody>
    </table>
    <script src="js/controller.js"></script>

现在我有2个问题。我提供这个HTML:

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/view/index.html');
});

var server = app.listen(3000, function() {
    console.log('Server running');
};

controller.js文件是否已导入?因为没有以某种方式导入bootstrap.css。

另一个问题是如果该行

$scope.data = jobs.data;

甚至有效吗?我应该读取文件还是使用index.js中的导出对象?如何只导出这一个对象?

我是从头开始构建的,因为我对js和东西都很新。

谢谢!

1 个答案:

答案 0 :(得分:0)

我认为问题在于你的模块和控制器声明。 声明模块时,必须首先通过传递它的依赖项来实例化它。

angular.module('slrm', []);

之后,您可以将控制器连接到模块

angular.module('slrm').controller('slrmctrl', function($scope) { $scope.data = jobs.data; }));

其次,不是在外部读取data.json对象并将其传递给控制器​​,为什么不读取控制器内的数据呢?

angular.module('slrm').controller('slrmctrl', ['$scope', '$http', function($scope, $http) {
    $http.get('out/data.json')
        .then(function(response) {
            $scope.data = response.data;
        }); 
}]);

编辑以显示计时器(轮询)实施的示例

angular.module('slrm').controller('slrmctrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
    $scope.refreshInterval = 900; // Sec (15 Minutes)

    $scope.getData = function () {
        $http.get('out/data.json')
            .then(function(response) {
                $scope.data = response.data;

                return $timeout($scope.getData, $scope.getTimeLeftToRefresh());
            }); 
    };

    $scope.getTimeLeftToRefresh = function () {
        var now = new Date();
        var timeLeftToRefresh = ($scope.refreshInterval - (now.getMinutes() * 60 + now.getSeconds()) % $scope.refreshInterval) * 1000;

        return timeLeftToRefresh;
    };

    // Initial call to start the loop
    $scope.getData();

}]);