AngularJS Bootstrap UI，发出将数据传递到模式的问题。 selectedCard未定义

Question

I have a feeling I am very much confused about the $scope, and am therefore selecting nothing. Having a hard time understanding where selectedCard is being called from, if at all. Would anyone mind explaining to me where I am going wrong?

NOTE: I believe I have too many files etc to create a plunkr worth looking through, but a live version of the site can be found here: 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());
        });
    };


});

sendCard.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 for calling the modal:

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

Answer 1

Try to remove the:

ng-controller="mainCtrl"

In your sendCard.html file

Answer 2

There's no need to use

$scope.selectedCard

You can just use selectedCard, since it's not tied to the $scope anyway:

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

Answer 3

You don't actually have selectedCard set on your main controller's scope; you are just passing in whichever card is clicked as the selectedCard . Thus, all you have to do is resolve the card the user has clicked:

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

...And pass in card to your modal controller function. Then, assuming your selectedCard has the property you show in your template ( card_title ), everything should render as you expect.

EDIT: The above will work for you, but also just noticed that you have the plural $scope.cards in your modal controller and singular card in your template. You might consider changing everything to the singular, since it matches your data object. It's also hard to tell if your sendCard.html is in a separate file (or is an ng-template script), but as @eliagentili said, you should remove the ng-controller attribute from it.

Finally, you'll need to fix your send function:

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