为什么在我的角度html绑定中调用的函数接收空值?

时间:2019-06-06 04:36:26

标签: javascript angularjs ionic-framework

我正在创建一个简单的Web应用程序,它代表旅行计划者之类的东西。只需从我制作的数据库中的位置列表中提供一些简单的行程选项即可。我的feed页面应该显示每个attraction的图片,每个attraction是可点击的卡片,它将带您进入另一个页面,其中包含有关该attraction的更多信息。

// 
// init app
var tripperApp = angular.module('tripperApp', ["ui.router", 'ionic', 'LocalStorageModule']);

//
// setup routing
tripperApp.config(function($stateProvider, $urlRouterProvider) {
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/splash");

  // Now set up the states
  $stateProvider
    .state('splash', {
      url: "/splash",
      templateUrl: "partials/splash.html",
      controller: "splashCtrl"
    })
    .state("login", {
        url: "/login",
        templateUrl: "partials/login.html",
        controller: "loginCtrl"
    })
    .state("signup", {
      url: "/signup",
      templateUrl: "partials/signup.html",
      controller: "signupCtrl"
    })
    .state("reset-password", {
      url: "/reset-password",
      templateUrl: "partials/reset-password.html",
      controller: "resetPasswordCtrl" 
    })
    .state("set-password", {
      url: "/set-password/:user_id/:password_reset_hash",
      templateUrl: "partials/set-password.html",
      controller: "resetPasswordCtrl" 
    })
    .state("feed", {
      url: "/feed",
      templateUrl: "partials/feed.html",
      controller: "feedCtrl"
    })
    .state("wishlist", {
      url: "/wishlist",
      templateUrl: "partials/feed.html",
      controller: "wishlistCtrl"
    })
    .state("specificwishlist", {
      url: "/wishlist/:user_id",
      templateUrl: "partials/feed.html",
      controller: "wishlistCtrl"
    })
    .state("share", {
      url: "/share",
      templateUrl: "partials/share.html",
      controller: "shareCtrl"
    })
    .state("attraction", {
      url: "/attraction/:attraction_id",
      templateUrl: "partials/attraction.html",
      controller: "attractionCtrl"
    });
});

这是我的app.js文件,我在其中初始化所有路由和控制器。我认为我确实遇到了所有问题(我在Nodejs中有一个后端和所有东西,但是这行不通,因为它收到的所有值都是null -稍后再说……)。

我看到的主要问题是,我收到的几乎所有数据均为空。没什么真正加载正确的-但是我知道我已经正确连接到数据库。因为在某些地方我可以看到正确的结果。让我解释一下:

这是我的services/feed.js文件(我认为这不是很重要):

// 
// feed service: used to get setup filters and then query for a feed using those filters
tripperApp.factory("feedService", ["$rootScope", "api", function($rootScope, api) {
  var feedService = {};

  api.get("filters").success(function(data, status, headers, config) {
    $rootScope.filters = data; 
  })
  .error(function(data, status, headers, config) {
    // @TODO - gracefully handle error
  });

  feedService.runSearch = function($rootScope, session, callback) {
    // add on more results
    api.post("search", {
      "start": $rootScope.currentSpot
    })
    .success(function(data, status, headers, config) {
      // copy results into array
      for (var i = 0; i < data.length; i++) {
        $rootScope.results.push(data[i]);
      }
      $rootScope.currentSpot += data.length; 

      // call callback
      callback(true); // success!
    })
    .error(function(data, status, headers, config) {
      callback(false); // error!
    });
  };

  feedService.getWishlist = function($rootScope, session, callback) {
    // get all results
    api.post("wishlist", {
      "attraction_ids": session.picks
    })
    .success(function(data, status, headers, config) {
      // copy results into array
      $rootScope.results = data; 

      callback(true); // success!
    })
    .error(function(data, status, headers, config) {
      callback(false); // error!
    });
  };

  // column-related functions
  $rootScope.columns = function() {
    var columns = 1; 
    var windowWidth = window.innerWidth;

    if (windowWidth > 1300) {
      columns = 5;
    } else if (windowWidth > 1100) {
      columns = 4; 
    } else if (windowWidth > 640) {
      columns = 3;
    } else if (windowWidth > 300) {
      columns = 2;
    } 

    var rv = [];
    for (var i = 0; i < columns; i++) {
      rv.push(i);
    }
    return rv; 
  }

  $rootScope.getColumn = function(data, columnNumber) {
    var columns = $rootScope.columns().length; 
    var rv = [];
    for (var i = columnNumber; i < data.length; i += columns) {
      rv.push(data[i]);
    }
    return rv; 
  }

  $rootScope.columnClasses = function() {
    var columns = $rootScope.columns().length; 

    return {
      "col-33": (columns == 3),
      "col-25": (columns == 4),
      "col-20": (columns == 5),
      "col-50": (columns == 2)
    };
  }

  // generate thumbnail of a url
  $rootScope.thumb = function(filename) {
    return filename + ".thumb.jpeg";
  }

  return feedService; 
}]);

这是我的控制器(controller/feed.js)文件:

// 
// feed controller
tripperApp.controller("feedCtrl", function($scope, $rootScope, session, feedService, $ionicScrollDelegate) {
  // setup feed page (only once)
  if (typeof($rootScope.feed) == "undefined") {
    // first time loading - setup scope
    $rootScope.feed = {
      results: [],
      currentSpot: 0
    }
  } 

  // auto scroll down (if appropriate)
  window.setTimeout(function() {
    if (typeof($rootScope.feed.lastScrollPosition) != "undefined") {
      $ionicScrollDelegate.$getByHandle('feedScroll').scrollTo(0, $rootScope.feed.lastScrollPosition, false);
    }
  }, 0);

  // tell feed template that this is NOT for a wish
  $scope.wishlist = false; 

  // don't display share button on feed
  $scope.displayShare = function() {
    return false; 
  }

  // query and display results
  $scope.loadResults = function() { 
    feedService.runSearch($rootScope.feed, session, function(success) {
      if (!success) { 
        // @TODO - handle error

      }
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  }

  // whether an attraction is picked
  $scope.attractionIsPicked = function(attraction_id) {
    return session.picks.indexOf(attraction_id) != -1;
  };

  // when a result is picked/unpicked
  $scope.resultPicked = function(result) {
    var attraction_id = result.id;
    console.log(result);
    console.log(attraction_id);
    if (session.picks.indexOf(attraction_id) == -1) {
      // not yet picked, so lets pick it
      session.pickPlace(attraction_id);
    } else {
      // its picked, so lets unpick it
      session.unpickPlace(attraction_id);
    }
  }

  $rootScope.clickedResult = undefined;
  $scope.resultClicked = function(result) {
    $rootScope.clickedResult = result; 
    console.log("result: \n");
    console.log(result);
    $rootScope.feed.lastScrollPosition = 
      $ionicScrollDelegate.$getByHandle('feedScroll').getScrollPosition().top;
  }
});

我专门有几个功能遇到问题:

resultPicked()中的

controller/feed.jsthumb()中的services/feed.js。我都得到这两个空值。

我的partial/feed.html文件是这样的:

<ion-view>
    <ion-header-bar class="bar bar-positive" align-title="center">
        <div class="buttons">
            <button class="button ion-navicon-round button-light" ng-click="toggleLeftMenu(); " style="font-size: 22px"></button>
        </div>
        <h1 class="title" ng-show="wishlist==false">New York Attractions</h1>
        <h1 class="title" ng-show="wishlist==true">
            <span ng-show="feed.user.name == 'Your'">Your</span>
            <span ng-show="feed.user.name != 'Your'">{{feed.user.name}}'s</span>
            Wish List
        </h1>
        <div class="buttons" ng-show="displayShare()">
            <button class="button ion-android-share button-light" style="font-size: 22px" ng-click="sharePage();"></button>
        </div>
    </ion-header-bar>
    <ion-content class="padding feed-page" delegate-handle="feedScroll">
        <ion-list>
            <!-- display results in columns -->
            <div class="row">
                <div class="col" ng-class="columnClasses()" ng-repeat="column in columns()" >
                    <div class="card" ng-repeat="result in getColumn(feed.results, column)" ng-show="feed.results.length > 0">
                        <div class="item item-image">
                            <a>
                                <img ng-src="{{thumb(result.src)}}" ui-sref="attraction({attraction_id: result.id})" ng-click="resultClicked(result)">
                            </a>
                        </div>
                        <div class="item item-bottom-sect">
                            <div class="row">
                                <div class="col-75 col-wrap">
                                    <a ui-sref="attraction({attraction_id: result.id})" ng-click="resultClicked(result)" class="item-title">{{result.title}}</a>
                                </div>
                                <div class="col-25 right col-wrap">
                                    <span ng-click="resultPicked(result)">
                                        <span class="ion-heart heart heart-selected" ng-show="attractionIsPicked(result.id)" class="heart-selected"></span>
                                        <span class="ion-heart heart" ng-show="!attractionIsPicked(result.id)"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ion-list>
        <ion-infinite-scroll
            ng-if="!resultsLoaded"
            on-infinite="loadResults()" 
            distance="10%">
        </ion-infinite-scroll>
    </ion-content>
</ion-view>

现在,在我的供稿中,有两个调用resultClicked(),一个调用resultPicked()。 resultClicked(result)会返回正确的结果-但是resultPicked(results)总是会得到一个空值!另外,thumb(result.src)总是获得空值。我绝对知道是什么-这只是我从console.log来确认的事情。代码有什么明显的错误吗?

编辑:

这是picture,显示我在说什么。这些卡都是“断开的链接”,因为返回的值是null(未定义),如控制台所示。如从控制台中所示,当从resultPicked()而不是resultClicked()调用时,“结果”也为null。

0 个答案:

没有答案