0
我正在構建一個獲取輸入的角度應用，使用Google場所API檢索地址，然後使用Weather API以HTML格式在此處引發天氣，將其推送到控制器並將其帶入它的觀點。 在視圖中，我添加了收藏夾表格，當點擊「添加到收藏夾」時，可以獲得最喜歡的地方天氣。角度路線鏈接問題
我想將我的應用分成兩部分：搜索頁面和喜歡的頁面，所以我已經添加了ng路由到我的應用，但鏈接無法打開我想要的模板。
當我點擊「收藏夾」鏈接時，該視圖仍然保留在「search.html」模板上，而瀏覽器上顯示的Url更新爲127.0.0.1:8080/#!/search#favorites Thx for你的幫助！
的index.html
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" href="bower_components/angular-google-places-autocomplete/src/autocomplete.css">
<link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="vendor/angular.min.js"></script>
<script src="vendor/jquery-3.1.1.min.js"></script>
<script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script src="vendor/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js" type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.0/angular-sanitize.min.js' type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDsITXbh5OPM2hQscKmZAPte6pUoIYyV6g&libraries=places"></script>
<script src="bower_components/angular-google-places-autocomplete/src/autocomplete.js"></script>
</head>
<body ng-app="WeatherApp">
<div class="container">
<div class="row">
<p>WeatherMe</p>
<a href="#/favorites">Favorites</a>
<a href="#/search">Search</a>
<ng-view></ng-view>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/WeatherController.js"></script>
<!-- Services -->
<script src="js/services/weather.js"></script>
</body>
</html>
app.js：
var app = angular.module('WeatherApp', ['google.places', 'ngRoute', 'ngSanitize']);
app.run(function($rootScope) {
$rootScope.favorites = [];
})
app.config(function($routeProvider) {
$routeProvider
.when('/search', {
controller: "WeatherController",
templateUrl: "views/search.html"
})
.when('/favorites', {
controller: 'WeatherController',
templateUrl: 'views/favorites.html'
})
.otherwise({
redirectTo: '/search'
});
});
控制器：
app.controller('WeatherController', ['$scope', '$http', '$routeParams', '$rootScope', '$sce', function($scope, $http, $routeParams, $rootScope, $sce) {
$scope.input = " ";
$scope.currentWeather = '';
$rootScope.favorites = [];
$scope.getCurrentWeather = function() {
$http({
method: 'GET',
url: $sce.trustAsResourceUrl('http://api.openweathermap.org/data/2.5/weather?q=' + $scope.input.formatted_address + '&mode=html' + '&appid=3cf609ef6426533eae948239945a32df')
}).then(function successCallback(response) {
$scope.myData = $sce.trustAsHtml(response.data)
$scope.currentWeather = $scope.myData;
}, function errorCallback(response) {
console.log(response);
});
};
$scope.addToFavorites = function() {
$rootScope.favorites.push([$scope.input.formatted_address, $scope.currentWeather]);
}
}]);
模板： search.html：
> <input id="autocomplete" type="text" ng-model="input" size="80" aria-label="URL" g-places-autocomplete placeholder="london,Uk" />
> <button id="button1" ng-click="getCurrentWeather()">WeatherMe!</button>
> <button id="button2" ng-click="addToFavorites()">Add to Favorites!</button> <!-- Showing the Chosen place's Weather from
> Service --> <table id="table1" width="100%">
> <tbody class="weatherTable">
> <tr class="weatherTable">
> <td class="weatherTable" style="width:50%;">{{input.formatted_address}} </td>
> <td class="weatherTable" style="width:50%; padding-left: 20%" align="left" ng-bind-html="currentWeather"></td>
> </tr>
> </tbody> </table>
>
> <table id="table2" width="100%" ng-repeat="favorite in favorites">
> <tbody class="weatherTable">
> <tr class="weatherTable">
> <td class="weatherTable" style="width:50%">{{favorite[0]}}</td>
> <td class="weatherTable" style="width:50%; padding-left: 20%" ng-bind-html="favorite[1]"></td>
> </tr>
> </tbody> </table>
favorites.html：
<h6>Favorites!</h6>
<table id="table2" width="100%" ng-repeat="favorite in favorites">
<tbody class="weatherTable">
<tr class="weatherTable">
<td class="weatherTable" style="width:50%">{{favorite[0]}}</td>
<td class="weatherTable" style="width:50%; padding-left: 20%" ng-bind-html="favorite[1]"></td>
</tr>
</tbody>
</table>
你可以請把你的錯誤，你越來越？或者您可以將您的代碼放入plunkr.com –
當我點擊「收藏夾」鏈接時，視圖仍然保留在「search.html」模板上，而瀏覽器上顯示的Url更新爲：http://127.0.0.1 ：8080 /＃！/ search＃favorites –
嘗試添加哈希前綴！到你的網址 - 像＃！/收藏夾 - 或者確保哈希被設置爲空字符串 - 在你的配置區塊中，注入$ locationProvider並設置$ locationProvider.hashPrefix（''） – IAmDranged