Question

我有一个我在CodePen中使用的应用程序，但我不能以这种方式使用表达式{{Expression}} 我需要以这种方式使用它[[]]

这是应用程序的代码

    <!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">
	[[1+3+"QUE FUCKING PEDO OSEA"]]
		<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>

你能告诉我为什么会这样吗？谢谢我开始使用angularJS

Answer 1

您可以使用$interpolateProvider：

用于配置插值标记。默认为{{和}}。

实施例

.config(['$interpolateProvider', function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
}]);

Answer 2

终于搞定了，没有意识到Index.js上有这段代码

var myApp = angular.module('myApp', [], function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
});

很多人，我真的开始了所以我不知道为什么这部分代码到现在为止....

Answer 3

使用Angular JS，你应该使用{{ scopeVariableName }}，下面是一个非常简单易懂的例子供你开始使用。

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

AngularJS使用[[]]代替{{}}表达式

3 个答案:

您可以使用$interpolateProvider：

实施例