javascript - Controller 中的分配未传递到服务

Question

Controller 中我的分配$scope.getForecastByLocation未传递到 Controller 。目前city被指定为随机城市，如“Berkeley”，并且该城市被传递给工厂数据。但其想法是，当用户在输入中键入新城市时，它会获取输入并将新城市参数发送到数据工厂。

我一直在执行 console.logs，我可以看到按钮正在工作，但调用 Data.getApps($scope.inputcity); 不起作用，因此城市始终处于“伯克利”。

有人能弄清楚为什么我无法将新城市发送到数据工厂吗？谢谢你!

index.html

 <input ng-model="city">
  </md-input-container>
  <md-button class="md-raised" ng-click="getForecastByLocation(city)">SUBMIT</md-button>

Controller .js

var app = angular.module('weatherApp.controllers', [])

    var city = 'Berkeley';

    app.controller('weatherCtrl', ['$scope','Data',

        function($scope, Data) {
        $scope.getForecastByLocation = function(city) {
                $scope.inputcity = city;
                console.log($scope.inputcity);
                Data.getApps($scope.inputcity).then(function(data){
                    $scope.data = data;
                    $scope.name = data.name;
                    console.log($scope.data); //object shows "Berkeley"
                    console.log($scope.name);
                 });//initiate Data.getApps by passing in a new city
         }
        Data.getApps(city).then(function(data) {
          $scope.data = data;

          var vm = $scope;

          vm.description = data.weather[0].description;
          vm.speed = (2.237 * data.wind.speed).toFixed(1) + " mph";
          vm.name = data.name;
          vm.humidity = data.main.humidity + " %";
          vm.temp = data.main.temp;
          vm.fTemp = (vm.temp * (9 / 5) - 459.67).toFixed(1) + " °F";

        },function(res) {
            if(res.status === 500) {
                // server error, alert user somehow
            } else { 
                // probably deal with these errors differently
            }
        }

        ); // end of function

    }])//end of controller

service.js

app.factory('Data', function($http, $q) {

    var data = [],
       lastRequestFailed = true,
       promise;
   return {
      getApps: function(city) {
         if(!promise || lastRequestFailed) {
            // $http returns a promise, so we don't need to create one with $q

            promise = $http.get('http://api.openweathermap.org/data/2.5/weather?',{
              params: {
                q: city,
              }
            })
            .then(function(res) {
                lastRequestFailed = false;
                data = res.data;
                return data;
            }, function(res) {
                return $q.reject(res);
            });
         }
         return promise;
      }
   }
});

编辑:

我根据其他人的建议修改了我的 Controller 代码，目前看起来像这样。工厂是一样的，我已经删除了 HTML 中的参数。

app.controller('weatherCtrl', ['$scope','Data',

    function($scope, Data) {
$scope.city = 'Berkeley';

$scope.getForecastByLocation = function() {
                console.log($scope.city); //making sure I can read the input
                console.log('this is your input ' + $scope.city);
                Data.getApps($scope.city).then(function(data){
                console.log('this is your output ' + $scope.city); //should say "This is your output "tracy", but it still reads at "Berkeley"

                    $scope.data = data;
                    $scope.name = data.name;
                    console.log($scope.data); //object shows "Berkeley"
                    console.log($scope.name);
                 });//initiate Data.getApps by passing in a new city
         }

Answer 1

var app = angular.module('weatherApp.controllers', [])

    var city = 'Berkeley'; 

    app.controller('weatherCtrl', ['$scope','Data',

        function($scope, Data) {
        $scope.getForecastByLocation = function() {
                $scope.inputcity = $scope.city;
                console.log($scope.inputcity);
                Data.getApps($scope.inputcity).then(function(data){
                    $scope.data = data;
                    $scope.name = data.name;
                    console.log($scope.data); //object shows "Berkeley"
                    console.log($scope.name);
                 });//initiate Data.getApps by passing in a new city
         }
        Data.getApps(city).then(function(data) {
          $scope.data = data;

          var vm = $scope;

          vm.description = data.weather[0].description;
          vm.speed = (2.237 * data.wind.speed).toFixed(1) + " mph";
          vm.name = data.name;
          vm.humidity = data.main.humidity + " %";
          vm.temp = data.main.temp;
          vm.fTemp = (vm.temp * (9 / 5) - 459.67).toFixed(1) + " °F";

        },function(res) {
            if(res.status === 500) {
                // server error, alert user somehow
            } else { 
                // probably deal with these errors differently
            }
        }

        ); // end of function

    }]);
    app.factory('Data', function($http, $q) {

    var data = [],
       lastRequestFailed = true,
       promise;
   return {
      getApps: function(city) {
         if(!promise || lastRequestFailed) {
            // $http returns a promise, so we don't need to create one with $q

            promise = $http.get('http://api.openweathermap.org/data/2.5/weather?',{
              params: {
                q: city,
              }
            })
            .then(function(res) {
                lastRequestFailed = false;
                data = res.data;
                promise = false; // reset the promise value.
                return data;
            }, function(res) {
                return $q.reject(res);
            });
         }
         return promise;
      }
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="weatherApp.controllers">
    <div ng-controller="weatherCtrl">
        <input ng-model="city">
        <md-button class="md-raised" ng-click="getForecastByLocation()">SUBMIT</md-button>
    </div>
</div>