CODEWITHSUNDEEP
javascriptangularjs
user2929209
user2929209

Reputation:

Angular JS changing the variable syntax

I need to change how Angular echos variables, after reading some tutorials I gather I need to:

change the interpolation symbols in Laravel. Simply pass the $interpolateProvider to your app module, and set the tags you wish to use instead.

As I'm new to Angular I have no idea what that means. So I have the following: 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>

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

</script>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <h1>Hello [[name]]</h1>
</div>

What am I doing wrong?

Upvotes: 0

Views: 98

Answers (2)

Cyril Gandon
Cyril Gandon

Reputation: 17068

Look at the example in the docs $interpolateProvider, you need to configure in the .config method:

var customInterpolationApp = angular.module('customInterpolationApp', []);

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


customInterpolationApp.controller('DemoController', function() {
  this.name = "Dale Snowdon";
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<div ng-app="customInterpolationApp" ng-controller="DemoController as demo">
  <p>Name:
    <input type="text" ng-model="demo.name">
  </p>
  <h1>Hello [[demo.name]]</h1>
</div>

Upvotes: 2

JMK
JMK

Reputation: 28080

You need to do this in your config function, the following should work:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>

var app = angular.module('studious', []);

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

</script>

<div ng-app="studious">
<p>Name: <input type="text" ng-model="name"></p>
<h1>Hello [[name]]</h1>

</div>

Working

Upvotes: 3

Related Questions