Question

我一直在研究一个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(){

    });
  };

这里是Modal窗口的控制器

 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>

谢谢！

Answer 1

抱歉，实际上我弄清楚我做错了什么。在标记中，您可以使用ng-click传递参数，如下所示：

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

如何在ui-router状态下将参数传递给Modal窗口

1 个答案: