离子保存输入作为变量

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指令。