AngularJS Bootstrap UI，将数据传递到模态的问题.已选择卡未定义

AngularJS Bootstrap UI, issues passing data into modal. selectedCards undefined

本文关键字：问题 模态 选择 未定义 UI Bootstrap 数据 AngularJS      更新时间：2023-09-26

我有一种感觉，我对$scope感到非常困惑，因此什么也没选择。很难理解从哪里调用选定的卡，如果有的话。有人介意向我解释我哪里出错了吗？

注意：我相信我有太多的文件等来创建值得一看的 plunkr，但可以在这里找到该网站的实时版本：http://marcmurray.net/test_sites/card_site/index.html

Javascript：

angular.module("cardSite", ['masonry', 'ngAnimate', 'ui.bootstrap'])
.controller('mainCtrl', function($scope, dataService, $scope, $uibModal, $log) {
    $scope.cards = [];
    dataService.getCards().then(function(response) {
        $scope.cards = response.data;
    }, function() {});
    $scope.plusOne = function(card) {
        card.card_rating += 1;
    };
    $scope.isActive = false;
    $scope.changeClass = function() {
        $scope.isActive = !$scope.isActive;
    };
    // Modal stuff here
    $scope.modalUpdate = function(size, selectedCard) {
        var modalInstance = $uibModal.open({
            animation: $scope.animationsEnabled,
            templateUrl: 'sendCard.html',
            controller: function($scope, $uibModalInstance, cards) {
                $scope.cards = cards;

                $scope.send = function() {
                    $uibModalInstance.close($scope.selectedCard);
                    console.log($scope.selectedCard);
                };
                $scope.cancel = function() {
                    $uibModalInstance.dismiss('cancel');
                };
            },
            size: size,
            resolve: {
                cards: function() {
                    return $scope.selectedCard;
                }
            }
        });
        modalInstance.result.then(function(selectedCard) {
            $scope.selected = selectedCard;
        }, function() {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

});

发送卡.html：

<div ng-controller="mainCtrl">
<div class="modal-header">
    <h3 class="modal-title">Ready to send a card?</h3>
</div>
<div class="modal-body">
    Card selected: <b>{{card.card_title}}</b>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="send()">Send</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>

用于调用模态的 HTML：

<button ng-click="modalUpdate(lg, card)" class="btn btn-stretch">Send</button>

尝试删除： 

ng-controller="mainCtrl"

在您的发送卡.html文件中

您实际上没有在主控制器的作用域上设置selectedCard;您只需将单击的任何卡作为selectedCard传递。因此，您所要做的就是解析用户单击的卡：

resolve: {
  card: function() {
     return selectedCard;
  }
}

。并将card传递给模态控制器函数。然后，假设您的selectedCard具有您在模板中显示的属性（card_title），所有内容都应按预期呈现。

编辑：以上将为您工作，但也刚刚注意到您的模态控制器中有复数$scope.cards，模板中有单数card。您可以考虑将所有内容更改为单数，因为它与您的数据对象匹配。也很难判断您的sendCard.html是否在单独的文件中（或者是一个 ng 模板脚本），但正如@eliagentili所说，您应该从中删除 ng-controller 属性。

最后，您需要修复send函数： 

$scope.send = function() {
  $uibModalInstance.close($scope.card);
  console.log($scope.card);
};

无需使用 

$scope.selectedCard

你可以只使用selectedCard，因为它无论如何都不会绑定到$scope：

resolve: {
    cards: function() {
         return selectedCard;
    }
}
相关文章：