在html視圖中使用ngRoute

我想使用NgRoute從url發送這個參數來改變位置從靜態映射這裏是我的代碼，但我沒有ide如何在HTML視圖中實現$ route在html視圖中使用ngRoute

，我想要做的是讓通過PARAM從URL發送的LAT和液化天然氣，並將其轉變爲NG-SRC，只是想了解如何獲得PARAMS 感謝

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

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
\t <meta charset="UTF-8"> 
 

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

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

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

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

 
</head> 
 

 
<body> 
 

 
\t <body ng-app="myApp"> 
 

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

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

 
\t \t \t \t <div class="controls"> 
 

 
\t \t \t \t \t <div class="container" > 
 

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

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

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

 
\t \t \t \t <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"> 
 

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

 

 
\t \t \t </div> 
 

 
\t \t </div> 
 
\t </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>

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' 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
\t <meta charset="UTF-8"> 
 

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

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

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

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

 
</head> 
 

 
<body> 
 

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

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

 
\t \t \t \t <div class="controls"> 
 

 
\t \t \t \t \t <div class="container" > 
 

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

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

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

 
\t \t \t \t <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"> 
 

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

 

 
\t \t \t </div> 
 

 
\t \t </div> 
 
\t </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>

來源

2014-10-02 Kross

如果我理解正確的話，你只需要： - 與您的應用程序註冊ngRoute模塊，如果它尚未 - 通過$ routeParams服務到控制器

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

假設你的URL看起來像http://myurl/?LAT=xxx&LNG=yyy，在$ rootParams將具有相同值的對象：

$rootParams = {LAT:xxx, LNG:yyy}

您可以在控制器中使用例如$rootParams['LAT']並在您的視圖中重新注入。

$從角API rootParams（簡潔）DOC：https://docs.angularjs.org/api/ngRoute/service/ $ routeParams

來源

2014-10-02 15:42:34 Sycomor

'VAR對myApp = angular.module（ '對myApp'，[ 'ngRoute']，函數（$ interpolateProvider）{$ interpolateProvider.startSymbol（ '[['）; $ interpolateProvider.endSymbol（']]'）; }）; var controller = function（$ scope，$ routeParams）{' – Kross 2014-10-02 15:53:10

這是我已經添加的部分ngRoute並在我的控制器中添加$ routeParams我需要做其他事情，所以我可以在我的視圖中使用$ routeParams？ – Kross 2014-10-02 15:54:05

只需填寫一個可以從視圖中訪問的變量？ $ scope.loc = $ routeParams;取決於您處理URL更改的方式，您可能還需要查看$ location和/或$ route服務以監視更改。 – Sycomor 2014-10-02 15:58:27

在html視圖中使用ngRoute

回答

相關問題