Question

我在Angular应用程序中使用ng-view。在index.html中我有一个按钮，当我点击这个按钮时，我得到了JSON数据，但是我无法将我更新的范围访问回我的ng-view模板。请检查下面的代码。＆LT;

div class="row" style="display:none;" id="srhBox" ng-controller="SearchController">
         <button 
            data-channelid="" data-relatedtovideoid="" data-videoduration="" data-videotype="" data-keyword="{{keyword}}"
            ng-click="search($event)" class="btn btn-default" type="submit">
</div>

这是控制器

angular.module('kZoneApp').controller('SearchController', ['$location','$scope', 'dataFactory', '$window', '$routeParams', '$rootScope','$http', function ($location,$scope, dataFactory, $window, $routeParams, $rootScope, $http) {


    $scope.search = function (evt) {


     $location.path("search"); // update ng-view

        var keyword = $(evt.currentTarget).attr("data-keyword");
        var channelid = $(evt.currentTarget).attr("data-channelid");
        var relatedtovideoid = $(evt.currentTarget).attr("data-relatedtovideoid");
        var videoduration =  $(evt.currentTarget).attr("data-videoduration");
        var videotype =  $(evt.currentTarget).attr("data-videotype");

        var url = 'http://xxxx.com/api/Videos/Search?'
        url = url + 'keyword=' + keyword
        url = url + '&channelid=' + channelid
        url = url + '&relatedtovideoid=' + relatedtovideoid
        url = url + '&videoduration=' + videoduration
        url = url + '&videotype=' + videotype

        $http.get(url).
        success(function (data) {

            $scope.searchResults = data;
            console.log(data) // Yes it shows JSON data


           });
    }


}]);

这里是ng-view模板的代码......

<div class="col-md-12 " style="padding-top:5px;">
    {{searchResults.nextPageToken}} // This is BLANK
</div>

... JSON

{
 "nextPageToken": "CBkQAA",
 "items": [
  {
   "etag": "\"dhbhlDw5j8dK10GxeV_UG6RSReM/B_XTRBSSmBkwVbCPVJmABe4rJpo\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "n8JEY8PKCcI"
   },
   "snippet": {
    "publishedAt": "2015-06-05T18:51:06.000Z",
    "channelId": "UCY48IObMpigEGsBEtfUUepg",
    "title": "WWE 2K15 The New Day vs Power Rangers Summer Slam wwe 2k15",
    "description": "I created this video with the YouTube Video Editor (http://www.youtube.com/editor)",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/n8JEY8PKCcI/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/n8JEY8PKCcI/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/n8JEY8PKCcI/hqdefault.jpg"
     }
    },
    "channelTitle": "Caqueen520",
    "liveBroadcastContent": "none"
   }
  },..... more items

路线配置。

$routeProvider
    .when('/search', {
        templateUrl: 'pages/search.html',
        controller: 'SearchController'
    })

所以{{searchResults.nextPageToken}}是空的，即使console.log清楚地显示它有价值。可能导致这种情况的原因。

更新

似乎问题是....我有ng-controller =＆＃34; SearchController＆＃34;对于我的按钮然后我使用路线加载VIEW（ng-view），因此angular不会在同一页面上更新两个具有相同名称的控制器....它会更新第一个控制器＆amp;忽略了第二个。

Answer 1

虽然$ http负责运行摘要周期，它负责双向绑定，但尝试使用$ timeout添加超时，因为它还运行摘要周期。

       $http.get(url)
       .success(function (data) {
        $timeout(function () {
          $scope.searchResults = data;
          console.log(data) // Yes it shows JSON data
        }, 100);
       });

根据您的路线配置，/search视图使用相同的控制器SearchController。因此，当您使用/search加载$location.path('/search')视图时，控制器会重新初始化，因此$scope.searchResults将是未定义的。您必须在不同的控制器中搜索登录并在路由配置中使用该控制器。

或者你可以有一个隐藏的局部视图，只有当你使用ng-if指令获得searchResults时才会显示它。

所以在主视图中有这个html

<div ng-if="searchResults" class="col-md-12 " style="padding-top:5px;">
    {{searchResults.nextPageToken}} // This is BLANK
</div>

并从SearchController中的$location.path('/search')方法中删除$scope.search。

ng-click不会在ng-click时更新

1 个答案: