Question

我有一些view，它显示了一些表格数据。我可以添加数据，删除它们并更新。我从模态窗口（CRUD）创建NoticeEdit.html。我需要在每次更改后更新view（Notices.html）。例如，删除记录view后更新。但是在添加之后 - 不，我需要刷新整个页面。

从模态窗口返回时如何更新view？

AngularJS的相关部分view（Notices.html）：

<div 
    class="..."  
    ng-controller="NoticesCtrl">

<div class="..." >
   <div class="...">
      <div class="...">
         <table class="..." ng-model="noticesList">
            <thead>
               <tr>
                  <th>№</th>
                  <th>Date</th>
                  <th>Status</th>
                  <th> ... </th>
               </tr>
            </thead>
            <tbody>
               <tr ng-repeat="notice in noticesList">
                  <th>{{$index+1}}</th>
                  <th>{{notice.noticeDate}}</th>
                  <th>{{notice.noticeStatus}}</th>                        
                  <th>

                     <button class="..." ng-click="editNotice(notice.id)">Edit</button>
                     <button class="..." ng-click="deleteNotice(notice.id)">Remove</button>
                  </th>
                </tr>
            </tbody>
         </table>
     </div>
  </div>
</div>
</div>

AngularJS控制器（Notices.js）：

function NoticesCtrl($scope, $http, $resource, $modal, Notices ) {
   $scope.noticesList = Notices.query();
   $scope.editNotice = function (idValue) {
           var modalInstance = $modal.open({
               templateUrl: 'views/Notices/NoticeEdit.html',
               controller: NoticeEditCtrl,
               resolve : { editId : function () { return idValue; } }
           });
   };

   $scope.deleteNotice = function (idValue) {
           var modalInstance = $modal.open({
               templateUrl: 'views/Notices/NoticeDelete.html',
               controller: NoticeEditCtrl,
               resolve : { editId : function () {
                    return idValue; }
               }
           });

           modalInstance.result.then(function () {
              $scope.loadNotices ();
           }, function () {});
   };

   $scope.loadNotices = function () {
        $scope.noticesList = Notices.query();
        $scope.$apply();
   }
}

NoticesCtrl.$inject = ['$scope', '$http', '$resource', '$modal','Notices'];

AngularJS控制器（NoticeEdit.js）：

function NoticeEditCtrl($scope, $http, $resource, $modalInstance, $moment, $window, Notices, editId ) {
    $scope.model = new Notices({id : 0});
    if (editId > 0) {
        Notices.get ({id : editId}, function (data) { $scope.model = data; })
    }

    $scope.noticeDate = new Date();
    $scope.noticeDateBegin = $moment().date(-30).hour(0).minute(0).toDate();
    $scope.noticeDateEnd = new Date();

    $scope.ok = function () {
        Notices.save ($scope.model, function () {
            $modalInstance.close();
            $window.location.reload();
        });
    };

    $scope.deleteOk = function () {
      if ($scope.model.id > 0) {
        Notices.delete ($scope.model, function () {
            $modalInstance.close();
        });
      }
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

   $scope.loadNotices = function () {
        $scope.noticesList = Notices.query();
        $scope.$apply();
   }
}

NoticeEditCtrl.$inject = ['$scope', '$http', '$resource', '$modalInstance', "$moment", "$window", 'Notices', 'editId'];

AngularJS工厂（Notices.js）：

function Notices($resource) {
    return $resource ('/api/notices/:id');
}
Notices.$inject = ['$resource'];

Play 1.3路线的相关部分（routes.conf）

POST    /api/notices      NoticeMessageController.update

Play 1.3控制器的相关部分（update()操作）：

public class NoticeMessageController extends Controller {
    public static void update() {
        Notice jsonNoticeMessage = new GsonBuilder().create().fromJson(request.params.get("body"), Notice.class);
        Notice notice = (jsonNoticeMessage.id > 0) ? (Notice) Notice.findById(jsonNoticeMessage.id) : new Notice();

        ...

        notice.save();
        renderJSON(notice);
    }
    ...

NoticeEdit.html是一个模态窗口：

enter image description here

我正在做$window.location.reload();，但这不是我需要的。我只需要更新表格。

我将非常感谢这些信息。谢谢大家。

Answer 1

我在Notices.js内尝试：

       modalInstance.result.then(function () {
          $scope.loadNotices ();
          $scope.$apply();
       }, function () {});

我猜您正在发生的事情是，您希望$scope.noticesList上的自动监视会在模态控制器中Notices.save()和Notices.delete()之后导致视图更新。但是，除非您明确创建一个objectEquality === true的手表，否则只会浅看变量。浅观察对象内的属性更改不会记录更改;只能用不同的对象替换它。

如果这不起作用，您可能希望在noticesList上创建一个显式监视：

$scope.$watch('noticesList', someFunction, true);

我98％确定当您删除Notice时会检测到更改，但如果它未检测到特定Notice内的更改，则可能需要使用{{1 }}，甚至$watchCollection包含$watch。

的函数

关闭AngularJS中的模态窗口后表的更新

1 个答案: