Почему функции, вызываемые в моих угловых HTML-привязках, получают нулевые значения? - PullRequest
Новая
       15

Почему функции, вызываемые в моих угловых HTML-привязках, получают нулевые значения?

0 голосов
/ 06 июня 2019

Я создаю простое веб-приложение, которое представляет собой нечто вроде планировщика поездки.Просто предлагает несколько простых вариантов маршрута из списка мест в БД, которые я сделал.На моей 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"
    });
});
* 1007.* Это мой app.js файл, в котором я инициализирую все свои маршруты и контроллеры.Я думаю, что у меня буквально проблемы со всем (у меня есть серверная часть и все в Nodejs, но это работает неправильно, потому что все значения, которые он получает, являются нулевыми - подробнее об этом позже ...).

Основная проблема, которую я вижу, состоит в том, что почти все данные, которые я получаю, являются нулевыми.Ничего действительно не загружается правильно - но я знаю , что у меня есть правильное соединение с моей БД.Потому что есть места, где я могу увидеть правильные результаты.Позвольте мне объяснить:

Это мой файл 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.js и thumb() в 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 с.Что-то явно не так с кодом?

Редактировать:

Вот картинка , показывающая, о чем я говорю.Все карты являются «неработающими ссылками», потому что возвращаемое им значение равно нулю (не определено), как показано в консоли.«Результаты» также являются нулевыми, как показано в консоли, при вызове из resultPicked (), но не из resultClicked ().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...