Angular:模态使用后刷新列表如何?

时间:2014-06-24 12:41:44

标签: angularjs angularjs-scope angularjs-ng-repeat

我有一份员工名单(ng-repeat),我可以用模态更新员工信息。但是当我点击保存按钮时,列表不会更新(我必须按F5)。

我尝试使用$ watch但没有成功

有我的控制器(列表和模态):

var employee = angular.module('employee.module', [
    'app.common.module',
    'employee.services',
    'employee.router',
    'ui.bootstrap'
]);
employee.controller('EmployeeCtrl', [
    '$scope',
    '$log',
    'EmployeeServices',
    EmployeeCtrl
]);

function EmployeeCtrl($scope, $log, EmployeeServices) {


    $scope.retrieveEmp = function(){
        // retrieve employee list  --> OK
        return $scope.lesEmployees = EmployeeServices.getEmployees();
    }
    // $scope.$watch('retrieveEmp');
    $scope.retrieveEmp();

   $scope.$watch($scope.lesEmployees);

  /*...*/

}

  /*   MODAL controller for update or visu */
employee.controller('ModalCtrl', [
    '$scope',
    '$log',
    'EmployeeServices',
   '$stateParams',
    ModalCtrl
]);

function ModalCtrl ($scope, $log, EmployeeServices, $stateParams) {
    // display infos in modal --> OK
    EmployeeServices.getDetail($stateParams.id).$getPromise().then(

        function(detailEMP) {
            $scope.detailEmployee = detailEMP;
        },

        function() {
            $scope.detailEmployee = [];
            $scope.totalItems = 0;
        }
    );

    // close button
    $scope.close = function() { $scope.$close(true); };

    // update button
    $scope.ok = function(){
        EmployeeServices.updateEmp($scope.detailEmployee).$getPromise().then(

            $scope.close()
        )
    };
};

})();

我不明白如何使用$ watch,我找不到使用模态的例子。 我必须在哪个控制器中使用$ watch?

或者简单地说,是以正确的方式观看吗?

提前感谢

1 个答案:

答案 0 :(得分:0)

我没有发现问题,但我找到另一种方法来更新我的清单!

function ModalCtrl ($scope, $log, EmployeeServices, $stateParams, $rootScope ) {

   //   get detail   
   EmployeeServices.getDetail($stateParams.id).$getPromise().then(
        function(detailEMP) {
            $log.info("retrieve liste, date = " + detailEMP.hireDate);
            $scope.detailEmployee = detailEMP;
        }
    );

    //   close modal 
    $scope.close = function() { $scope.$close(true); };


    //   update list 
    var updateEmployees = function (item) {

        for (var i = 0; i < $rootScope.lesEmployees.length; ++i) {

            if ($rootScope.lesEmployees[i].idemployee === item.idemployee) {
                $rootScope.lesEmployees[i] = item;
                break;
            }
        }
    }        

    $scope.ok = function(){
        EmployeeServices.updateEmp($scope.detailEmployee).$getPromise().then(
            function(updateItem) {
                // updateItem is a boolean
                // true -> update OK
                // false -> update KO
                updateEmployees($scope.detailEmployee);
            }
        );
        $scope.close();

    };

};

工作正常!!