CODEWITHSUNDEEP
javascriptangularjs
Raphaël Parent
Raphaël Parent

Reputation: 253

Angularjs $interpolate provider not working

Even after some thorough research, i can't seem to find why my $interpolateProvider is not working. Here is where I define my new symbol.

var APP = APP || {};
APP.Subapp = APP.Subapp || {};
APP.Subapp.Admin = angular.module('APP.Subapp.Admin', ['APP.Subapp.Modules']);  
APP.Subapp.Admin.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

I do call the proper app with ng-app.

<html ng-app="APP.Subapp.Admin" ng-controller="MainController">
<head>
    <link rel="stylesheet" href="/stylesheets/style.css"/>
    ...

Since I'm using handlebars I really want to change that and I can't use ng-bind because I need to pass information through some functions like an ng-click.

... ng-click="confirm({{client.id}}) ...

Any help would be greatly appreciated.

EDIT //

I solved my problem, if it can help some people out there. It seems like i was overwriting my config in my main module js file. Here is the code that works.

(function(APP){
    'use strict';
     APP.Subapp.Admin.config(function( $controllerProvider, $interpolateProvider ){      
        APP.Subapp.Admin.controller = $controllerProvider.register;
        $interpolateProvider.startSymbol('{[{');
        $interpolateProvider.endSymbol('}]}');
    });
})(APP);

Upvotes: 1

Views: 4288

Answers (3)

ArunJaganathan
ArunJaganathan

Reputation: 713

var customInterpolationApp = angular.module('customInterpolationApp', []);
  customInterpolationApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[{');
    $interpolateProvider.endSymbol('}]');
  });
  customInterpolationApp.controller('DemoController', function() {
      this.label = "This binding by [{ }] interpolation symbols.";
  });
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>custom-interpolation-markup-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>  
</head>
<body ng-app="customInterpolationApp">
  
<div ng-controller="DemoController as demo">
    [{demo.label}]
</div>
</body>
</html>

I think this will help.Just try .

Upvotes: 2

Sergio Ivanuzzo
Sergio Ivanuzzo

Reputation: 1922

Try this (just add $interpolateProvider to dependencies):

'use strict';

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

myApp.config(['$interpolateProvider', 

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

Upvotes: 0

Rise Ledger
Rise Ledger

Reputation: 969

I have prepared an example where show how to use the $interpolateProvider: http://plnkr.co/edit/0lotZRHhvv2bIKc96RVi?p=preview

Here is the code:

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

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


customInterpolationApp.controller('DemoController', function() {
    this.label = "This binding is brought you by [[ ]] interpolation symbols.";
});
</script>
<div ng-app="App" ng-controller="DemoController as demo">
    [[demo.label]]
</div>

Upvotes: 1

Related Questions