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);
  });   
});

我在我的搜索TextBox上放了一个事件。

 <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标记，然后在搜索返回时，您可以修改正确的范围，更改应反映在离子列表中。

离子 - 单击按钮时填充离子列表

1 个答案: