離子保存輸入作爲變量

Question

我正在編碼與天氣開放的天氣應用程序，我想保存城市（輸入）作爲變量在另一個視圖上調用它。所以我想輸入維也納，發送到result.html並在那裏發佈當前的天氣，並檢查我應該穿什麼樣的衣服，例如，如果溫度低於20°，應用程序應該說我應該穿夾克。

這裏是我的Home.html：

<ion-view title="" hide-nav-bar="true" hide-back-button="true"> 
    <ion-content> 
    <div class="list card"> 
     <div class="item item-avatar"> 
     <img src="img/appicon.png"> 
     <h2>Weather App</h2> 
     <p>What clothes do you need?</p> 
     </div> 

    </div> 
    <div class="list"> 

    <div class="item item-input-inset"> 
    <label class="item-input-wrapper"> 
     <input type="text" placeholder="City" ng-model="inputs.city"> 
    </label> 
     <input class="button button-small" type="submit" ng-click="saveText(inputs)" value="Save" ng-controller="WeatherCtrl" /> 
    </div> 

</div> 

    </ion-content> 
</ion-view> 

這裏我app.js：

angular.module('starter', ['ionic']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

.config(function ($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('home', { 
     url: '/home', 
     controller: 'HomeCtrl', 
     templateUrl: 'views/home.html' 
    }) 
    .state('result', { 
     url: '/result', 
     controller: 'WeatherCtrl', 
     templateUrl: 'views/result.html' 
    }); 

    $urlRouterProvider.otherwise('/home'); 

}) 


.controller('HomeCtrl', function($scope) { 
    $scope.forcastDisabled = true 
}) 


.controller('WeatherCtrl', function ($scope, $http, $ionicLoading, $location) { 
    var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW']; 

    $scope.getIconUrl = function(iconId) { 
     return 'http://openweathermap.org/img/w/' + iconId + '.png'; 
    }; 

    $scope.save = {}; 

    $ionicLoading.show(); 


    $scope.saveText = function (inputs) { 
     alert('Geht'); 
     $location.path('result'); 
     $scope.save = angular.copy(inputs); 
     $scope.inputs.city; 

    } 

    var vm = this; 
    // Vienna 
    var id = 2761369; 
    var city = 'Vienna'; 
    var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + city; 

    var request = { 
    method: 'GET', 
    url: URL, 
    params: { 
     q: city, 
     mode: 'json', 
     units: 'imperial', 
     cnt: '7', 
     appid: '938c0cf5969f353bc718735f59aeffd6' 
    } 
    }; 

    $http(request) 
    .then(function(response) { 
     vm.data = response.data; 
     $scope.weather = response.data; 
    }). 
    catch(function(response) { 
     vm.data = response.data; 
     $scope.weather = response.data; 
    }); 

    $ionicLoading.hide(); 


}); 

和最後我result.html：

<ion-view view-title="Current Weather"> 
    <ion-content> 
    <div class="list card"> 
     <div class="item item-divider"><h1>City: {{weather.name}}</h1></div> 
     <div class="item item-thumbnail-left"> 
     <img src="{{getIconUrl(weather.weather[0].icon)}}" /> 
     <h1>{{weather.weather[0].main}}</h1> 
     </div> 
     <div class="item item-icon-left"> 
     <i class="icon ion-thermometer"></i> 
     <h2>Current Temperature: {{weather.main.temp}}&deg;</h2> 
     </div> 
     <div class="item item-icon-left"> 
     <i class="icon ion-thermometer"></i> 
     <h2>Today's High: {{weather.main.temp_max}}&deg;</h2> 
     </div> 
     <div class="item item-icon-left"> 
     <i class="icon ion-thermometer"></i> 
     <h2>Today's Low: {{weather.main.temp_min}}&deg;</h2> 
     </div> 
     <div class="item item-icon-left"> 
     <i class="icon ion-waterdrop"></i> 
     <h2>Humidity: {{weather.main.humidity}}%</h2> 
     </div> 
     <div class="item item-icon-left"> 
     <i class="icon ion-shuffle"></i> 
     <h2>Wind: {{weather.wind.speed}}mph, {{getDirection(weather.wind.deg)}}</h2> 
     </div> 
    </div> 
    </ion-content> 
</ion-view> 

我知道我不是目前使用的輸入，因爲我不知道如何在JS中做到這一點。那麼如何在url中調用我的輸入，然後在請求中調用？ 在此先感謝！

Answer 1

嘗試：

1. 添加城市變量作爲參數傳遞給你的狀態定義：

   .state('result', { 
       url: '/result', 
       controller: 'WeatherCtrl', 
       templateUrl: 'views/result.html', 
       params: { 
       city: null 
       } 
   }) 
   

2. 變量傳遞給目標狀態：

   $state.go("result", {city: inputs.city}); 
   

3. 注入$ stateParams服務並在控制器中使用該變量：

   var city = $stateParams.city; 
   

詳情請參閱https://github.com/angular-ui/ui-router/wiki/URL-Routing。

編輯

看看這個plunker展示我的變化：https://plnkr.co/edit/3dvhPCjv24Lebduy8BZz

注意，我感動saveText()功能的HomeCtrl並從home.html的刪除ng-controller指令。