控制器中的分配未傳遞到服務

Question

控制器中的我的分配$scope.getForecastByLocation未傳遞到控制器。目前city被指定爲像「伯克利」這樣的隨機城市，並且該城市被傳遞到工廠數據。但這個想法是，當用戶在輸入中鍵入一個新的城市時，它接受輸入並向Data工廠發送一個新的城市參數。

我一直在做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; 
     } 
    } 
}); 

編輯：

我修改我的控制器代碼一點從其他人的建議和它rrently看起來像這樣。工廠是一樣的，我已經刪除了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>

Answer 2

我相信你的控制器嘗試指派$scope.inputcity到var city = 'Berkeley的值，而不是將其分配給函數的參數city的價值。最好的做法是避免對從函數的作用域和函數的參數可訪問的變量使用相同的名稱。

爲什麼不直接在控制器中直接訪問$scope.city而不是將city作爲參數傳遞給ng-click="getForecastByLocation(city)"？

你的函數看起來是這樣的：

$scope.getForecastByLocation = function() { 
      console.log($scope.city); 
      Data.getApps($scope.city).then(function(data){ 
       $scope.data = data; 
       $scope.name = data.name; 
       console.log($scope.data); //object shows "Berkeley" 
       console.log($scope.name); 
      }); 
    }