AngularJS引导UI，将数据传递到模态。 selectedCards undefined

我有一种感觉，我对$ scope非常困惑，因此我没有选择任何东西。难以理解所选卡片从哪里被调用，如果有的话。难道有人会向我解释我哪里出错了吗？AngularJS引导UI，将数据传递到模态。 selectedCards undefined

注：我相信我有太多的文件等，以打造值得一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()); 
     }); 
    }; 


});

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调用的模式：

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

来源

2016-02-26 Jackanapes

尝试删除：

ng-controller="mainCtrl"

在你sendCard.html文件

来源

2016-02-26 18:43:54 eliagentili

没做什么可悲！ – Jackanapes

有没有必要使用

$scope.selectedCard

你可以使用selectedCard，因为它无论如何都不依赖于$范围：

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

来源

2016-02-26 19:49:31

你不会真的对你的主控制器的范围selectedCard集;你只是通过点击任何一张卡作为selectedCard。因此，所有你需要做的是解决该卡的用户点击：

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

...在card传递给你的模态控制器的功能。然后，假设您的selectedCard拥有您在模板中显示的属性（card_title），则所有内容都应按照您的预期呈现。

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

最后，你需要解决您的send功能：

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

来源

2016-02-26 20:02:47

AngularJS引导UI，将数据传递到模态。 selectedCards undefined

回答

相关问题