Question

我正在构建一个应用程序，可以在ng-grid行中的按钮上单击加载模式。显示模态和正确的数据非常有效。问题在于从模式中的表单中获取数据。这段代码

modalInstance.result.then(function(selectedItem){
                $scope.selected = selectedItem;
            });

为'selectedItem'

返回'undefined'

这是模态。

    <div ng-app="myApp">
    <div ng-controller="UsersCtrl">
        <script type="text/ng-template" id="editUserModal.html">
            <div class="modal-header">
                <h3 class="modal-title">Edit User <em>{{user.user_full_nm}} {{user.user_id}}</em></h3>
            </div>
            <div class="modal-body">
                <p>User Name: <input type="text" name="user_full_nm" value="{{user.user_full_nm}}"></p>
                <p>Email: <input type="text" name="user_nm" value="{{user.user_nm}}"></p>
                <p>Active:  
                    <select ng-model="user.deleted" ng-selected="user.deleted">
                        <option value="0" ng-selecte>Active</option>
                        <option value="1">Inactive</option>
                    </select>
                </p>
                <p>Termination Date: {{user.termination_date | date:'longDate'}}</p>
                <p>Last Entry Date: {{user.last_entry | date:'longDate'}}</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>

         <div class="gridStyle" ng-grid="gridOptions"></div>

    </div>
</div>

这是Angular应用程序。

    var app = angular.module('myApp', ['ngGrid','ui.bootstrap']);

    app.controller('UsersCtrl', function($scope, $http, $modal) {

    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: false
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [20, 40, 60],
        pageSize: 20,
        currentPage: 1
    };  
    $scope.setPagingData = function(data, page, pageSize){  
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.userData = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('getUsers').success(function (largeLoad) {      
                    data = largeLoad.filter(function(item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.setPagingData(data,page,pageSize);
                });            
            } else {
                $http.get('getUsers').success(function (largeLoad) {
                    $scope.setPagingData(largeLoad,page,pageSize);
                });
            }
        }, 100);
    };

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage,$scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage,    
$scope.filterOptions.filterText);
        }
    }, true);

    var editUserButtonTemplate = '<i class="fa fa-pencil" style="cursor:pointer;" ng-click="editUser(row.entity)"></i>';
    $scope.gridOptions = {
        data: 'userData',
        columnDefs: [
            {field: 'user_id', displayName: 'User ID', visible: false},
            {field: 'user_nm', displayName: 'Email'},
            {field: 'user_full_nm', displayName: 'Name'},
            {field: 'deleted', displayName: 'Active', width: 60, cellFilter: 'activeFilter'},
            {field: 'termination_date', displayName: 'Termination Date',cellFilter: 'date:\'longDate\''},
            {field: 'last_entry', displayName: 'Last Entry Date',cellFilter: 'date:\'longDate\''},
            {field: '', DisplayName: '', cellTemplate: editUserButtonTemplate, colFilterText: '',  width:20}
        ],
        enablePaging: true,
        showFooter: true,
        showFilter: true,
        enableRowSelection: false,
        filterOptions: $scope.filterOptions,
        totalServerItems:'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions
    };


    /************ open the edit user modal *********************/
    $scope.editUser = function(value) {

        var modalInstance = $modal.open({
          templateUrl: 'editUserModal.html',
          // scope: $scope,
          controller: 'editUserCtrl',          
          resolve: {
            user: function () {
              return value;
            }
          }
        });

        modalInstance.result.then(function(selectedItem){
            $scope.selected = selectedItem;
        });
    };
  });

  app.controller('editUserCtrl', function($scope, $http, $modalInstance, user) {
    $scope.user = user;
    $scope.ok = function () {
        $modalInstance.close($scope.selected);
      };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
  });

  // for the 'deleted' column, display 'Active' or 'Inactive' instead of 1 or 0
  app.filter('activeFilter', function(){
    var types = ['Active', 'Inactive'];
    return function(type){
        return types[type];
    };
 });

Answer 1

所以经常发生这种情况，我一发现问题就找到了这个问题。

angular-ui-bootstrap modal not passing back result

这导致了我的问题。

$scope.ok = function () {
        $modalInstance.close($scope.selected);
      };

将$ scope.selected更改为$ scope.user，它现在按预期工作。

Angular UI Bootstrap模态结果未定义

1 个答案: