angularjs没有刷新表

时间:2016-09-07 20:44:56

标签: javascript angularjs view

我在尝试重新渲染表的模型时遇到一些问题,当我更新此表内的项目时,调用将编辑该项的http api,然后,当执行回调时,它将调用同样的api获取刷新的项目列表,实际上它工作正常,但唯一的问题是没有使用新信息刷新表。

据我所知,http请求负责$ apply,但它有点混淆

这里我的表格中我对列表中的每个项目都有一个ng-repeat:

<table cellspacing="0" class="table table-small-font table-bordered table-striped">
                        <thead>
                            <tr>
                                <th data-i18n="_maintainer_devices_table_devices_column_code"></th>
                                <th data-i18n="_maintainer_devices_table_devices_column_type"></th>
                                <th data-i18n="_maintainer_devices_table_devices_column_status"></th>
                                <th data-i18n="_maintainer_devices_table_devices_column_action"></th>
                            </tr>
                        </thead>
                        <tbody class="middle-align">
                            <tr ng-repeat="(key, value) in devicesList">
                                <td>{{value.code}}</td>
                                <td>{{value.type.name}}</td>
                                <td>{{value.status.name}}</td>
                                <td ng-controller="UIModalsCtrl">
                                    <button class="btn btn-icon btn-white btn-xs">
                                        <i class="fa fa-truck"></i>
                                    </button>
                                    <button class="btn btn-icon btn-white btn-xs" ng-click="openModal('maintainer_modal', 'md','',{'title': 'Edit','action': 'edit'},value);" tooltip="Tooltip on bottom" tooltip-placement="bottom">
                                        <i class=" fa fa-pencil"></i>
                                    </button>
                                    <button class="btn btn-red btn-icon btn-icon-standalone btn-xs" ng-click="openModal('confirm_modal', 'md','',{'title': 'Delete','action': 'delete'},value);">
                                        <i class="fa fa-trash-o"></i>
                                        <span data-i18n="_button_delete"></span>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

deviceService.js

traceItServices.service('$deviceMaintainer', function($http) {
var call = function(data, action, callback) {
    var url = 'http://171.16.0.4:1337/maintainer/devices/' + action;
    showLoadingBar({
        pct: 100,
        delay: 1,
        before: function(pct) {
            $http.post(url, data).success(function(data, status, headers, config) {
                callback(data);
            });
        }
    });
};

this.get = function(data, callback) {
    call(data, 'get', function(data) {
        callback(data);
    });
}

this.update = function(data, callback) {
    call(data, 'update', function(data) {
        callback(data);
    });
}

...

deviceController.js

 traceitApp.controller('devicesCtrl', ['$scope', '$rootScope', '$http', '$timeout', '$messages', '$deviceMaintainer', '$translator',
    function($scope, $rootScope, $http, $timeout, $messages, $deviceMaintainer, $translator) {
        .......
        $scope.getUserDevices = function() {
            var data = {
                user_id: $rootScope.userInfo.userId
            };

            $deviceMaintainer.get(data, function(dataOut) {
                var list = JSON.parse(dataOut.response).devices.device;
                list = $translator.translateDevicesList(list);
                $timeout(function() {
                    $scope.devicesList = list;
                }, 1)

            });
        };

        $scope.updateDevice = function() {
            var data = {
                device_code: $scope.device_code,
                device_type_id: $scope.device_type_id,
                device_id: $scope.device_id
            };

            $deviceMaintainer.update(data, function(dataOut) {
                try {
                    var res = JSON.parse(dataOut.response);
                    if (res.result.id > 0) {
                        $messages.success($translator.localize.getLocalizedString('_message_success'));
                    }

                    $scope.getUserDevices();

                } catch (e) {
                    console.log(e.message);
                }
            });
        };
    }
]);

提前致谢。

2 个答案:

答案 0 :(得分:0)

实际上,你甚至使用$ timeout。 根据{{​​3}},这也会在当前摘要之后触发$ apply。

所以,渲染效果很好。你确定,你真的有新数据吗? 我猜你已经调试了回调。

答案 1 :(得分:0)

我发现,我正在使用 $ scope.devicesList = list 并且由于某种原因它没有更新它,但相反,我使用 $ rootScope.devicesList = list并且突然,它工作..现在当我改变任何东西并更新时,它刷新...... < / p>

谢谢你们=)

<强>更新

我弄清楚为什么它不工作,事情是,我从一个模态调用deviceCtrl-&gt;更新,而模态是,所以,这个对话框有不同的deviceCtrl范围,所以当我更新列表,它没有改变,因为它不在同一范围内,所以,为了解决它,我不得不在模态控制器中添加一个变量,包含它的父级。

var parent = $ scope。$ parent; (在模态控制器中注入$ scope)。

这样父级将成为deviceCtrl的原始范围。

所以修好它,很难想象,阅读和阅读我想出了这个。谢谢大家。