文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在html视图中使用ngRoute

问在html视图中使用ngRoute
EN

Stack Overflow用户
提问于 2014-10-02 23:11:32
回答 1查看 438关注 0票数 0

我想使用NgRoute从url中获取参数，发送这个来更改静态映射中的位置。这是我的代码，但是我不知道如何在HTML视图中实现$route。

我想要做的是从URL中通过param发送LAT和LNG，并将其更改为ng-src，只想了解如何获取参数谢谢

​

代码语言：javascript
复制
var myApp = angular.module('myApp',  ['ngRoute'], function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
});



var controller = function($scope, $routeParams) {
  $scope.route = $routeParams;

  //Technically here it gets the URL PARAMS 
  $scope.e = {
    location:"Albany, NY",
    locationAbout:"Try an address, a city, a place, or even latitude and longitude.",
    API:"",
    APIAbout:"You don't always need an API Key for Static Maps, but it's easy to acquire one. Without a key you might receive an error image instead of a map. Follow the link to the API Console.",
    zoom:13,
    minZoom:0,
    maxZoom:22,
    scaleAbout:"Scale will double the stated height and width. This is good for when you need a width or height larger than 640px.",
    width:600,
    height:300,
    maxSize:640,
    sizeAbout:"Max is 640px or 1280px when scale 2x.",
    markerColor: "red",
    mapType: "roadmap",
    format:"png",
    markerSize:"mid",
    gimmeAbout:"Treat this like a regular image. Pop it into an img tag or use as a background-image."    
  };
  $scope.colors =
    [
    "black",
    "brown",
    "green",
    "purple",
    "yellow",
    "blue",
    "gray",
    "orange",
    "red",
    "white"
  ];
  $scope.markerSizes =
    [
    { "value": "tiny", "text": "small" },
    { "value": "small", "text": "medium" },
    { "value": "mid", "text": "large" }
  ];
  $scope.mapTypes =
    [
    "roadmap",
    "terrain",
    "satellite",
    "hybrid"
  ];
  $scope.formats =
    [
    "png",
    "png32",
    "gif",
    "jpg",
    "jpg-baseline"
  ];

};


$("[data-toggle=popover]").popover({
  placement : 'right',
  trigger:'hover'
});




/*
 AngularJS v1.2.15
 (c) 2010-2014 Google, Inc. http://angularjs.org
 License: MIT
*/
(function(n,e,A){'use strict';function x(s,g,k){return{restrict:"ECA",terminal:!0,priority:400,transclude:"element",link:function(a,c,b,f,w){function y(){p&&(p.remove(),p=null);h&&(h.$destroy(),h=null);l&&(k.leave(l,function(){p=null}),p=l,l=null)}function v(){var b=s.current&&s.current.locals;if(e.isDefined(b&&b.$template)){var b=a.$new(),d=s.current;l=w(b,function(d){k.enter(d,null,l||c,function(){!e.isDefined(t)||t&&!a.$eval(t)||g()});y()});h=d.scope=b;h.$emit("$viewContentLoaded");h.$eval(u)}else y()}
var h,l,p,t=b.autoscroll,u=b.onload||"";a.$on("$routeChangeSuccess",v);v()}}}function z(e,g,k){return{restrict:"ECA",priority:-400,link:function(a,c){var b=k.current,f=b.locals;c.html(f.$template);var w=e(c.contents());b.controller&&(f.$scope=a,f=g(b.controller,f),b.controllerAs&&(a[b.controllerAs]=f),c.data("$ngControllerController",f),c.children().data("$ngControllerController",f));w(a)}}}n=e.module("ngRoute",["ng"]).provider("$route",function(){function s(a,c){return e.extend(new (e.extend(function(){},
{prototype:a})),c)}function g(a,e){var b=e.caseInsensitiveMatch,f={originalPath:a,regexp:a},k=f.keys=[];a=a.replace(/([().])/g,"\\$1").replace(/(\/)?:(\w+)([\?\*])?/g,function(a,e,b,c){a="?"===c?c:null;c="*"===c?c:null;k.push({name:b,optional:!!a});e=e||"";return""+(a?"":e)+"(?:"+(a?e:"")+(c&&"(.+?)"||"([^/]+)")+(a||"")+")"+(a||"")}).replace(/([\/$\*])/g,"\\$1");f.regexp=RegExp("^"+a+"$",b?"i":"");return f}var k={};this.when=function(a,c){k[a]=e.extend({reloadOnSearch:!0},c,a&&g(a,c));if(a){var b=
"/"==a[a.length-1]?a.substr(0,a.length-1):a+"/";k[b]=e.extend({redirectTo:a},g(b,c))}return this};this.otherwise=function(a){this.when(null,a);return this};this.$get=["$rootScope","$location","$routeParams","$q","$injector","$http","$templateCache","$sce",function(a,c,b,f,g,n,v,h){function l(){var d=p(),m=r.current;if(d&&m&&d.$$route===m.$$route&&e.equals(d.pathParams,m.pathParams)&&!d.reloadOnSearch&&!u)m.params=d.params,e.copy(m.params,b),a.$broadcast("$routeUpdate",m);else if(d||m)u=!1,a.$broadcast("$routeChangeStart",
d,m),(r.current=d)&&d.redirectTo&&(e.isString(d.redirectTo)?c.path(t(d.redirectTo,d.params)).search(d.params).replace():c.url(d.redirectTo(d.pathParams,c.path(),c.search())).replace()),f.when(d).then(function(){if(d){var a=e.extend({},d.resolve),c,b;e.forEach(a,function(d,c){a[c]=e.isString(d)?g.get(d):g.invoke(d)});e.isDefined(c=d.template)?e.isFunction(c)&&(c=c(d.params)):e.isDefined(b=d.templateUrl)&&(e.isFunction(b)&&(b=b(d.params)),b=h.getTrustedResourceUrl(b),e.isDefined(b)&&(d.loadedTemplateUrl=
b,c=n.get(b,{cache:v}).then(function(a){return a.data})));e.isDefined(c)&&(a.$template=c);return f.all(a)}}).then(function(c){d==r.current&&(d&&(d.locals=c,e.copy(d.params,b)),a.$broadcast("$routeChangeSuccess",d,m))},function(c){d==r.current&&a.$broadcast("$routeChangeError",d,m,c)})}function p(){var a,b;e.forEach(k,function(f,k){var q;if(q=!b){var g=c.path();q=f.keys;var l={};if(f.regexp)if(g=f.regexp.exec(g)){for(var h=1,p=g.length;h<p;++h){var n=q[h-1],r="string"==typeof g[h]?decodeURIComponent(g[h]):
g[h];n&&r&&(l[n.name]=r)}q=l}else q=null;else q=null;q=a=q}q&&(b=s(f,{params:e.extend({},c.search(),a),pathParams:a}),b.$$route=f)});return b||k[null]&&s(k[null],{params:{},pathParams:{}})}function t(a,c){var b=[];e.forEach((a||"").split(":"),function(a,d){if(0===d)b.push(a);else{var e=a.match(/(\w+)(.*)/),f=e[1];b.push(c[f]);b.push(e[2]||"");delete c[f]}});return b.join("")}var u=!1,r={routes:k,reload:function(){u=!0;a.$evalAsync(l)}};a.$on("$locationChangeSuccess",l);return r}]});n.provider("$routeParams",
function(){this.$get=function(){return{}}});n.directive("ngView",x);n.directive("ngView",z);x.$inject=["$route","$anchorScroll","$animate"];z.$inject=["$compile","$controller","$route"]})(window,window.angular);
//# sourceMappingURL=angular-route.min.js.map
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>

	<meta charset="UTF-8">

	<title>Sistema de Alarmas Ever-Track</title>

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Oxygen+Mono' rel='stylesheet' type='text/css'>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

	<link rel='stylesheet prefetch' href='http://staticmapmaker.com/css/main.css'>

	<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

	<body ng-app="myApp">

		
		
		<input type="checkbox" class="toggle" id="toggle">
		<header class="col col-right">
			<h1><i class="fa fa-map-marker"></i> Ever-Track GPS System    </h1>
			<a href="#" class="link">Sistema de rastreo de Alarmas</a>
		</header>

		<div class="main" ng-controller="controller">
			<div class="col-left col">
				<label for="toggle" class="label-toggle">
					<span class="close-it"><span class="fa fa-arrow-circle-left"></span></span>
					<span class="open-it"><span class="fa fa-arrow-circle-right"></span></span>
				</label>

				<div class="controls">

					<div class="container" >

						<form>
							<fieldset ng-show="false">

								<div class="form-group">
									<label for="location" class="cushion">Location [[route]] <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.locationAbout]]"></i></label>
									<div class="form-control" ><input type="text" ng-model="e.location" id="location"></div>
								</div>
								<div class="form-group">
									<label for="api" class="cushion">
										<a href="https://code.google.com/apis/console/" target="_blank">API Key</a>
										<i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.APIAbout]]"></i></label>
										<div class="form-control"><input type="text" ng-model="e.API" id="api" placeholder="API Key"></div>
									</div>
								</fieldset>
								<fieldset>
									<div class="form-group">
										<label for="zoom">Zoom</label>
										<div class="form-control"><input type="range" name="input" ng-model="e.zoom" min="[[e.minZoom]]" max="[[e.maxZoom]]" id="zoom"></div>
									</div>
									<div class="form-group">
										<label for="scale">Scale (2x) <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.scaleAbout]]"></i>
										</label>
										<div class="form-control"><input type="checkbox" ng-model="scale" ng-true-value="2" ng-false-value="1" id="scale" ng-init="scale='false'"></div>
									</div>
									<div class="form-group">
										<label for="width" class="cushion">Ancho <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i></label>
										<div class="form-control"><input type="number" ng-model="e.width" min="0" max="[[e.maxSize]]" id="width"></div>
									</div>
									<div class="form-group">
										<label for="height" class="cushion">Alto <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i>
										</label>
										<div class="form-control"><input type="number" ng-model="e.height" min="0" max="[[e.maxSize]]" id="height"></div>
									</div>
								</fieldset>
								<fieldset ng-show="false">
									<div class="form-group">
										<label for="showMarker">Map Marker</label>
										<div class="form-control"><input type="checkbox" ng-model="showMarker" ng-true-value="true" ng-false-value="false" id="showMarker"></div>
									</div>
									<ng-switch on="showMarker">
									<ng-switch ng-switch-when="true">
									<div class="form-group">
										<label for="markerColor"> Marker Color</label>
										<div class="form-control"><select ng-model="e.markerColor"
											ng-options="color for color in colors" id="markerColor">
										</select></div>
									</div>
									<div class="form-group">
										<label for="markerSize"> Marker Size</label>
										<div class="form-control"><select ng-model="e.markerSize"
											ng-options="markerSize.value as markerSize.text for markerSize in markerSizes" id="markerSize">
										</select></div>
									</div>
								</ng-switch>
							</ng-switch>
						</fieldset>
						<fieldset>
							<div class="form-group">
								<label for="mapType"> Tipo de Mapa</label>
								<div class="form-control"><select ng-model="e.mapType"
									ng-options="mapType for mapType in mapTypes" id="mapType">
								</select></div>
							</div>
							<div class="form-group">
								<label for="format"> Formato imagen</label>
								<div class="form-control"><select ng-model="e.format"
									ng-options="format for format in formats" id="format">
								</select></div>
							</div>
							<div class="form-group">
								<label for="visual"> Efecto Virtual</label>
								<div class="form-control"><input type="checkbox" ng-model="visual" ng-true-value="true" ng-false-value="false" ng-init="visual='true'" id="visual"></div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>

		</div>
		<div class="col-right col">
			<div class="static">

				<img ng-src="http://maps.googleapis.com/maps/api/staticmap?center=[[e.location.split(' ').join('+')]]&zoom=[[e.zoom]]&scale=[[scale]]&size=[[e.width]]x[[e.height]]&maptype=[[e.mapType]]&sensor=false[[ e.API !== '' && '&key='+e.API || '' ]]&format=[[e.format]]&visual_refresh=[[visual]][[ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' ]]" alt="Google Map of [[e.location]]" class="static-map" id="map">

			</div>
			<div class="tabs">


			</div>

		</div>
	</div>

</body>

<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js'></script>
<script src="js/angular-route.min.js"></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>

<script src="js/index.js"></script>

</body>

</html>

​

​

代码语言：javascript
复制
var myApp = angular.module('myApp', [], function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
});

var controller = function($scope) {
  $scope.e = {
    location:"Albany, NY",
    locationAbout:"Try an address, a city, a place, or even latitude and longitude.",
    API:"",
    APIAbout:"You don't always need an API Key for Static Maps, but it's easy to acquire one. Without a key you might receive an error image instead of a map. Follow the link to the API Console.",
    zoom:13,
    minZoom:0,
    maxZoom:22,
    scaleAbout:"Scale will double the stated height and width. This is good for when you need a width or height larger than 640px.",
    width:600,
    height:300,
    maxSize:640,
    sizeAbout:"Max is 640px or 1280px when scale 2x.",
    markerColor: "red",
    mapType: "roadmap",
    format:"png",
    markerSize:"mid",
    gimmeAbout:"Treat this like a regular image. Pop it into an img tag or use as a background-image."
  };
  $scope.colors =
    [
    "black",
    "brown",
    "green",
    "purple",
    "yellow",
    "blue",
    "gray",
    "orange",
    "red",
    "white"
  ];
  $scope.markerSizes =
    [
    { "value": "tiny", "text": "small" },
    { "value": "small", "text": "medium" },
    { "value": "mid", "text": "large" }
  ];
  $scope.mapTypes =
    [
    "roadmap",
    "terrain",
    "satellite",
    "hybrid"
  ];
  $scope.formats =
    [
    "png",
    "png32",
    "gif",
    "jpg",
    "jpg-baseline"
  ];

};


$("[data-toggle=popover]").popover({
  placement : 'right',
  trigger:'hover'
});
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>

	<meta charset="UTF-8">

	<title>Sistema de Alarmas Ever-Track</title>

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Oxygen+Mono' rel='stylesheet' type='text/css'>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

	<link rel='stylesheet prefetch' href='http://staticmapmaker.com/css/main.css'>

	<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

	<body ng-app="myApp">
	
		<input type="checkbox" class="toggle" id="toggle">
		<header class="col col-right">
			<h1><i class="fa fa-map-marker"></i> Ever-Track GPS System    </h1>
			<a href="#" class="link">Sistema de rastreo de Alarmas</a>
		</header>

		<div class="main" ng-controller="controller">
			<div class="col-left col">
				<label for="toggle" class="label-toggle">
					<span class="close-it"><span class="fa fa-arrow-circle-left"></span></span>
					<span class="open-it"><span class="fa fa-arrow-circle-right"></span></span>
				</label>

				<div class="controls">

					<div class="container" >

						<form>
							<fieldset ng-show="false">

								<div class="form-group">
									<label for="location" class="cushion">Location <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.locationAbout]]"></i></label>
									<div class="form-control" ><input type="text" ng-model="e.location" id="location"></div>
								</div>
								<div class="form-group">
									<label for="api" class="cushion">
										<a href="https://code.google.com/apis/console/" target="_blank">API Key</a>
										<i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.APIAbout]]"></i></label>
										<div class="form-control"><input type="text" ng-model="e.API" id="api" placeholder="API Key"></div>
									</div>
								</fieldset>
								<fieldset>
									<div class="form-group">
										<label for="zoom">Zoom</label>
										<div class="form-control"><input type="range" name="input" ng-model="e.zoom" min="[[e.minZoom]]" max="[[e.maxZoom]]" id="zoom"></div>
									</div>
									<div class="form-group">
										<label for="scale">Scale (2x) <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.scaleAbout]]"></i>
										</label>
										<div class="form-control"><input type="checkbox" ng-model="scale" ng-true-value="2" ng-false-value="1" id="scale" ng-init="scale='false'"></div>
									</div>
									<div class="form-group">
										<label for="width" class="cushion">Ancho <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i></label>
										<div class="form-control"><input type="number" ng-model="e.width" min="0" max="[[e.maxSize]]" id="width"></div>
									</div>
									<div class="form-group">
										<label for="height" class="cushion">Alto <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i>
										</label>
										<div class="form-control"><input type="number" ng-model="e.height" min="0" max="[[e.maxSize]]" id="height"></div>
									</div>
								</fieldset>
								<fieldset ng-show="false">
									<div class="form-group">
										<label for="showMarker">Map Marker</label>
										<div class="form-control"><input type="checkbox" ng-model="showMarker" ng-true-value="true" ng-false-value="false" id="showMarker"></div>
									</div>
									<ng-switch on="showMarker">
									<ng-switch ng-switch-when="true">
									<div class="form-group">
										<label for="markerColor"> Marker Color</label>
										<div class="form-control"><select ng-model="e.markerColor"
											ng-options="color for color in colors" id="markerColor">
										</select></div>
									</div>
									<div class="form-group">
										<label for="markerSize"> Marker Size</label>
										<div class="form-control"><select ng-model="e.markerSize"
											ng-options="markerSize.value as markerSize.text for markerSize in markerSizes" id="markerSize">
										</select></div>
									</div>
								</ng-switch>
							</ng-switch>
						</fieldset>
						<fieldset>
							<div class="form-group">
								<label for="mapType"> Tipo de Mapa</label>
								<div class="form-control"><select ng-model="e.mapType"
									ng-options="mapType for mapType in mapTypes" id="mapType">
								</select></div>
							</div>
							<div class="form-group">
								<label for="format"> Formato imagen</label>
								<div class="form-control"><select ng-model="e.format"
									ng-options="format for format in formats" id="format">
								</select></div>
							</div>
							<div class="form-group">
								<label for="visual"> Efecto Virtual</label>
								<div class="form-control"><input type="checkbox" ng-model="visual" ng-true-value="true" ng-false-value="false" ng-init="visual='true'" id="visual"></div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>

		</div>
		<div class="col-right col">
			<div class="static">

				<img ng-src="http://maps.googleapis.com/maps/api/staticmap?center=[[e.location.split(' ').join('+')]]&zoom=[[e.zoom]]&scale=[[scale]]&size=[[e.width]]x[[e.height]]&maptype=[[e.mapType]]&sensor=false[[ e.API !== '' && '&key='+e.API || '' ]]&format=[[e.format]]&visual_refresh=[[visual]][[ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' ]]" alt="Google Map of [[$route.current.params]]" class="static-map" id="map">

			</div>
			<div class="tabs">


			</div>

		</div>
	</div>

</body>

<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.3/angular-route-segment.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>

<script src="js/index.js"></script>

</body>

</html>

​

javascript
html
angularjs
angular-routing
EN

回答 1

Stack Overflow用户

发布于 2014-10-02 23:42:34

如果我没理解错的话，您只需要：-在应用程序中注册ngRoute模块-将$routeParams服务传递给您的控制器

代码语言：javascript
复制
var controller = function($scope, $routeParams) { ...

假设您的url类似于http://myurl/?LAT=xxx&LNG=yyy，则$rootParams将是一个具有相同值的对象：

代码语言：javascript
复制
$rootParams = {LAT:xxx, LNG:yyy}

您可以在控制器中使用$rootParams['LAT']进行访问，并在视图中重新注入。

来自Angular API的$rootParams (简洁)文档：https://docs.angularjs.org/api/ngRoute/service/$routeParams

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/26163942

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档