将 json 传递给角度控制器

Question

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

我的 json 对象存储在我的 index.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 和其他东西非常陌生。

谢谢！

Answer 1

我认为问题在于您的模块和控制器声明。 当声明一个模块时，你必须先实例化它，传递它的依赖。

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();

}]);