当我点击页面

时间:2017-09-05 09:43:23

标签: angularjs angular-material

我必须在我的页面中通过角度材料图标添加一个刷新按钮,$http调用以获取最新数据并更新视图。我添加了$watch来检查更新。以下是相同

的javascript文件
angular.module('myApp').controller('viewController', function($scope, $http) {

$scope.fetch = function() {

    $scope.gridOptions = {
        data : []
    }
    $http({
        method : 'GET',
        url : '/ServiceLookupMS/webapi/resource/gating-info',
        headers : {
            'Content-Type' : 'application/json'
        }
    }).then(function(response) {

        $scope.gridOptions.data = response.data;
        $scope.$watch('gridOptions', function(newValue){
            $scope.gridOptions = newValue;
        });
    })
}

$scope.refresh = function(){
    $scope.fetch();
}

});

我在我的HTML页面中使用了$scope.gridOptions,并将其加载到表格中。 ng-init="fetch()"加载初始数据,ng-click="refresh()"加载。

<div ng-controller="viewController" ng-cloak ng-init="fetch()">
<div grid-data id='gtaingInfo' grid-options="gridOptions"
    grid-actions="gridActions">
.................
        <div layout-gt-xs="row" layout-xs="column" layout-align="end center">
        <div layout="row" layout-align="start end">
            <md-tooltip md-direction="left">Refresh Grid</md-tooltip>
            <md-icon md-svg-src="images/ic_refresh_black_24px.svg" ng-click="refresh()"></md-icon>
        </div>
...................
...................
<tbody>
                <tr grid-item>
                    <td class="mdl-data-table__cell--non-numeric"><span
                        ng-bind="item.appName"></span></td>
                    <td class="mdl-data-table__cell--non-numeric"
                        ng-bind="item.apiName"></td>
                    <td class="mdl-data-table__cell--non-numeric"
                        ng-bind="item.baseUrl"></td>
                    <td class="mdl-data-table__cell--non-numeric"
                        ng-bind="item.gatingEnabled"></td>
                    <td class="mdl-data-table__cell--non-numeric"><md-menu-bar>
                        <md-menu> <md-icon class="material-icons"
                            ng-click="$mdMenu.open()">more_vert</md-icon> <md-menu-content
                            layout="column" width="50px"> <md-menu-item>
                        <md-button class="md-primary" ng-click="">Edit</md-button></md-menu-item> <md-menu-item>
                        <md-button class="md-primary" ng-click="">Delete</md-button></md-menu-item> </md-menu-content> </md-menu> </md-menu-bar></td>
                </tr>
            </tbody>

当我点击刷新按钮时,$http正在调用,但更新的数据已加载到视图中。谁能告诉我我做错了什么?

1 个答案:

答案 0 :(得分:0)

我知道了:

我将$http负载分配给了一些临时对象,并在临时对象上尝试了$watch。有效