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

回答

相關問題