角度带模式/旁边如何触发事件?

时间:2014-02-22 17:21:42

标签: angularjs angular-strap

我有一个控制器:

angular.module('mean').controller('LocationController', [
  '$scope', '$location', '$rootScope', '$aside', '$routeParams', '$filter',
  'ngTableParams', 'LocationService', 'UserService', 'CompanyService',
  function ($scope, $location, $rootScope, $aside, $routeParams, $filter,
    ngTableParams, LocationService,  UserService, CompanyService) {
      $rootScope.menuItem = 'locations';
      $scope.contentTemplate = '/views/location/index.html';
      $scope.locations = [];
      $scope.current_location = null;
      $scope.newLocation = {};
      $scope.location_parent_id = $routeParams.location_parent_id;
      $scope.validation_errors = [];


      $scope.index = function() {
        CompanyService.initialized.then(function() {
          var company_id = CompanyService.getCompany()._id;
          LocationService.list(company_id, $routeParams.location_parent_id).then(function(response) {
            if(response.data.status === 'ok') {
              $scope.locations = response.data.locations;
              $scope.current_location = response.data.location || null;
            } else {
              alert('TBD');
            }
          });
        });

        $scope.tableParams = new ngTableParams({
          page: 1,
          count: 10,
        }, {
          total: $scope.locations.length,
          getData: function($defer, params) {
            var orderedData = params.sorting() ? $filter('orderBy')($scope.locations, params.orderBy()) : $scope.locations;
            orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;

            $scope.locations = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

            params.total(orderedData.length);
            $defer.resolve($scope.locations);
          }
        });
      }

      $scope.addLocationModal = function() {
        $scope.location_types = ['warehouse', 'section', 'row', 'shelf', 'bin'];
        $aside({
          scope: $scope,
          template: '/views/location/addLocationAside.html',
          show: true
        });
      }

      $scope.createLocation = function() {
        $scope.newLocation.company_id = CompanyService.getCompany()._id;
        LocationService.create($scope.newLocation).then(function(response) {
          if(response.data.status === 'ok') {
            $scope.$hide();
            $scope.index();
          } else {
            $scope.validation_errors = response.data.error;
          }
        });
      }
  }
]);

在模态中,我有一个表单,在提交时调用createLocation函数。如果位置创建成功,我希望关闭模式并运行索引并重新更新列表。但这似乎并没有发生。我认为这是一个$scope问题,但我不确定是什么。

1 个答案:

答案 0 :(得分:1)

没有更多细节,很难说出问题。所以这里有一些猜测:

范围适用

如果LocationService无法处理$scope.$apply,您可能需要在createLocation内的回调中调用它才能使更改生效。例如:

$scope.createLocation = function() {
    $scope.newLocation.company_id = CompanyService.getCompany()._id;
        LocationService.create($scope.newLocation).then(function(response) {
            $scope.$apply(function () {
                if (response.data.status === 'ok') {
                    $scope.$hide();
                    $scope.index();
                } else {
                    $scope.validation_errors = response.data.error;
                }
            });
        });
};

您可能还需要在$scope.index回调中的LocationService.list方法中执行此操作。

初始化仅解决一次

CompanyService.initialized承诺可能只在加载应用时解决一次,因此在关闭模式后您实际上并未更新$scope.locations。我将其改为:

var isCountryServiceInitalized = false;

$scope.index = function() {
    function updateLocations() {
        var company_id = CompanyService.getCompany()._id;
        LocationService.list(company_id, $routeParams.location_parent_id).then(function(response) {
            if (response.data.status === 'ok') {
                $scope.$apply(function () { // you don't need this if LocationService already calls $scope.$apply
                    $scope.locations = response.data.locations;
                    $scope.current_location = response.data.location || null;
                });
            } else {
                alert('TBD');
            }
        });
    }

    if (!isCountryServiceInitalized) { 
        CompanyService.initialized.then(function () {
            isCountryServiceInitalized = true;
            updateLocations();
        });
    } else {
        updateLocations();
    }

    ...
};

ngTable reload

看起来你正在使用ng-table。更新$scope.locations后,您可能需要重新加载表格。使用:

$scope.tableParams.reload();