如何将参数传递到 UI 路由器状态的模式窗口

How to pass parameters to a Modal window in ui-router state

本文关键字:状态 模式 窗口 路由器 UI 参数传递      更新时间:2023-09-26

我一直在开发一个 Angular 应用程序,但我被困住了。我使用 ng-repeat 遍历对象列表并可以访问此变量._id。这是父页面的标记:当我单击删除按钮时,我想将._id传递给父页面(当前页面)控制器,以便它可以传递到模式窗口的控制器

        <tr ng-repeat="bucket in buckets">
            <td>{{ bucket.name }}</td>
            <td>{{ bucket._id }}</td>
            <td class="col-sm-1">
                <!-- View Bucket Page -->
                <a ui-sref="bucketPage({ bucket_id: bucket._id })" class = "btn btn-primary">View</a>
                <!-- Delete Bucket -->
                <!-- <a ui-sref="userProfile({ bucket_id: bucket._id })" ng-click="deleteBucketModalWindow('sm')" class="btn btn-danger">Delete</a> -->
                <a ng-click="deleteBucketModalWindow('sm')" href="#/" class="btn btn-danger">Delete</a>
            </td>
        </tr>

当我转到不同的页面(而不是模态)时,我得到了如何做到这一点。为此,我这样做:

<a ui-sref="userProfile({ user_id: user._id })" class = "btn btn-primary">View Profile</a>

这是父页面的控制器:

    // Modal window to delete a Bucket
    $scope.deleteBucketModalWindow = function(size){
    var user_id = $stateParams.user_id;
    var bucket_id = $stateParams.bucket_id;
    console.log("bucket id in userProfileCtrl: ", user_id);
    console.log("bucket id in userProfileCtrl: ", bucket_id);

    var modalInstance = $modal.open({
      templateUrl: 'views/deleteBucketModal.html',
      controller: 'deleteBucketModalCtrl',
      size: size,
      bucket_id: bucket_id,
      resolve: {
        bucket_id: function () {
          return $stateParams.bucket_id;
        }
      }
    });
    modalInstance.result.then(function(){
      // Refresh the data
      User.getSingleUserDetails($stateParams.user_id)
        .success(function(buckets){
          $scope.buckets = buckets;
        })
        .catch(function(response){
          console.log(response);
        });
    }, function(){
    });
  };

这是模态窗口的控制器

 angular.module('ResourceBucket')
.controller('deleteBucketModalCtrl', function($scope, $modalInstance, $auth, $http, $window, $rootScope, Bucket){
    // Delete the bucket
    $scope.deleteBucket = function(){
        // close the modal
        $modalInstance.close();
        console.log("Inside deleteModal - bucket_id: ", $scope.bucket_id);
        // bucket_id gets passed through the "resolve"
        Bucket.deleteBucket($scope.bucket_id) 
            .then(function(data){
                console.log("Just deleted a bucket!", data);
            })
            .catch(function(response){
                console.log("In catch of deleteBucketModalCtrl: ", response);
            });
        };
    $scope.cancel = function(){
        // Just close the modal, dont do anything else
        // After you close the modal, in .then() refresh the data
        $modalInstance.close();
    }
});

这是模态窗口的标记

    <!-- Add Bucket Modal -->
<div controller="deleteBucketModalCtrl">
    <div class="modal-header"> 
    </div>
    <div class="modal-body">
        <ul>
            <!-- Bucket Modal -->
            <div class = "row">
                <!-- Heading -->
                <h2 class="text-center">Sure, you want to delete the bucket?</h2>
                <button class="btn btn-danger" ng-click="deleteBucket()">Delete</button>
          <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </ul>
    </div>
    <div class="modal-footer">
    </div>
</div>

谢谢!

对不起,实际上我发现我做错了什么。在标记中,您可以使用 ng-click 传递参数,如下所示:

<a ng-click="deleteBucketModalWindow('sm', bucket._id)" href="" class="btn btn-danger">Delete</a>