AngularJS uses [[]] instead of {{}} for expressions

Question

I got an app which i use from CodePen but i cant use expressions in this way {{Expression}} i need to use it on this way [[]]

here is the code for the app

    <!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>

Can you tell me why this is happening ?? thanks im getting started with angularJS

No idea i just try it but it gives me the same text {{TEXT}} but as u see if i write the expression in [[EXPRESSION]] it gets rigth so i dont know whats the matter D: — Kross, Oct 01 '14 at 18:36
If i write any expression in {{}} it dont works it just gives me the same text, but if i use [[]] exp gets evaluated, the matter is i dont know how it happend ? — Kross, Oct 01 '14 at 18:37
mmmm nice didnt realize it , let me put that code here guess there will be the change — Kross, Oct 01 '14 at 18:44
It's better to use `` the you dont have to `ng-cloak` the containers http://stackoverflow.com/questions/16125872/why-ng-bind-is-better-than-in-angular — andrew, Oct 01 '14 at 18:48

score 3 · Accepted Answer · answered Oct 01 '14 at 18:39

3

You can use $interpolateProvider:

Used for configuring the interpolation markup. Defaults to {{ and }}.

Example:

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

answered Oct 01 '14 at 18:39

Ilan Frumer

32,059
8
70
84

my question here is why in this specific web wich i get from CodePen can't use {{}} try it yourself – Kross Oct 01 '14 at 18:43
1

@Kross check the code inside js/index.js, you'll probably find $interpolateProvider there. – Ilan Frumer Oct 01 '14 at 18:48

score 0 · Answer 2 · answered Oct 01 '14 at 18:46

Finally got it, didn't realize there was this piece of code on Index.js

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

Thaks a lot guys, im really getting started so i got no idea why was this part of code until now....

score -2 · Answer 3 · answered Oct 01 '14 at 18:39

-2

With Angular JS you should use {{ scopeVariableName }}, below is a very simple and easy to understand example for you to get started.

<!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>

answered Oct 01 '14 at 18:39

Yasser Shaikh

46,934
46
204
281

`$interpolate` can change the delimiters. See this answer: http://stackoverflow.com/a/26148276/471810 – klyd Oct 01 '14 at 18:41
i got it actually getting started on codeSchool just my question here is why in this specific web wich i get from CodePen can't use {{}} try it yourself – Kross Oct 01 '14 at 18:42

AngularJS uses [[]] instead of {{}} for expressions

3 Answers3

You can use $interpolateProvider:

Example: