離子 - 單擊按鈕時填充離子列表

Question

我有一個離子列表。我想在單擊按鈕時將數據綁定到列表。

$scope.searchY = function(){$scope.youtubeParam = { 
    key: 'myKey', 
    type: 'video', 
    maxResults: '10', 
    part: 'id,snippet', 
    q: $scope.searchKey , 
    order: 'date',}; 

$http.get('https://www.googleapis.com/youtube/v3/search', {params:$scope.youtubeParam}).success(function(response){ 
$scope.myVideos = response.items; 
    angular.forEach(response.items, function(child){ 
    console.log (child); 
    }); 
}); 

我把一個事件像這樣我的搜索文本框。

<ion-content> 
    <div> 
     <label class="item item-input"> 
      <i class="icon ion-search placeholder-icon"></i> 
      <input type="search" placeholder="Search" ng-enter="searchY()" ng-model="searchKey"> 
     </label> 
    </div> 
    <!--<div class="embed-responsive embed-responsive-16by9"><youtube-video video-id="theBestVideo"></youtube-video></div>--> 
    <div data-ng-controller="AppCtrl" class="list card" ng-repeat="video in myVideos"> 
     <div class="item item-text-wrap"> 
      <h2>{{video.snippet.title}}</h2> 
      <p>{{video.snippet.publishedAt | limitTo: 10}}</p> 
     </div> 
     <div class="item item-image"> 
      <div class="embed-responsive embed-responsive-16by9"><youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video></div> 
     </div> 
     <div class="item item-divider"> 
      <button class="button button-outline button-block button-positive"> 
       Share this Video 
      </button> 
     </div> 
    </div> 
</ion-content> 

當我做了搜索，我可以看到，有返回結果和$scope.myVideos變量是不是空的。但它沒有被列入名單卡。請問我做錯了什麼。已經在這上好幾天了。如果我直接調用該函數而不進行搜索，它會起作用。謝謝

Answer 1

每個控制器都會創建一個新的範圍，因此您的搜索框和視頻列表正在查看不同的範圍。當您從搜索框正在查看的範圍修改myVideos時，更改將不會反映在AppCtrl正在查看的範圍中。

嘗試將ng-controller="AppCtrl"移動到ion-content標記，然後當您搜索返回時，您可以修改正確的範圍，並且這些更改應該反映在離子列表中。