如何让角带模式/侧向触发事件?

时间:2022-04-10 19:37:08

I have a controller:

我有一个控制器:

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;
          }
        });
      }
  }
]);

In the modal, I have a form, that when submitted, calls createLocation function. If the location is created successfully, I want the modal to close and the index to run and re-update the list. But that doesn't seem to happen. I think it's a $scope issue, but I'm not sure what.

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

1 个解决方案

#1


1  

Without any more details, it's really hard to tell the problem. So here are some guesses:

没有更多的细节,很难讲出这个问题。下面是一些猜测:

scope apply

适用范围

If LocationService doesn't handle $scope.$apply, you might need to call it in the callback inside createLocation for the changes to take effect. Example:

如果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;
                }
            });
        });
};

You may also need to to do that in your $scope.index method, inside the LocationService.list callback.

您可能还需要在您的$范围内执行此操作。索引方法,在LocationService中。回调列表。

initialized is only resolved once

初始化只能解决一次。

It's possible that the CompanyService.initialized promise is only resolved once, at the loading of the app, so you aren't actually updating $scope.locations after closing the modal. I'd change that to:

有可能是公司服务。初始化承诺仅在加载应用程序时解析一次,因此您实际上并没有更新$scope。关闭模式后的位置。我改变:

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

ngTable重载

It looks like you are using ng-table. You probably need to reload the table after updating $scope.locations. Use:

看起来您正在使用ng-table。您可能需要在更新$scope.location之后重新加载该表。使用:

$scope.tableParams.reload();

#1


1  

Without any more details, it's really hard to tell the problem. So here are some guesses:

没有更多的细节,很难讲出这个问题。下面是一些猜测:

scope apply

适用范围

If LocationService doesn't handle $scope.$apply, you might need to call it in the callback inside createLocation for the changes to take effect. Example:

如果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;
                }
            });
        });
};

You may also need to to do that in your $scope.index method, inside the LocationService.list callback.

您可能还需要在您的$范围内执行此操作。索引方法,在LocationService中。回调列表。

initialized is only resolved once

初始化只能解决一次。

It's possible that the CompanyService.initialized promise is only resolved once, at the loading of the app, so you aren't actually updating $scope.locations after closing the modal. I'd change that to:

有可能是公司服务。初始化承诺仅在加载应用程序时解析一次,因此您实际上并没有更新$scope。关闭模式后的位置。我改变:

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

ngTable重载

It looks like you are using ng-table. You probably need to reload the table after updating $scope.locations. Use:

看起来您正在使用ng-table。您可能需要在更新$scope.location之后重新加载该表。使用:

$scope.tableParams.reload();