Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Malachi Danielewicz
Malachi Danielewicz
16,559 Points
Posted by Malachi Danielewicz
Malachi Danielewicz
16,559 Points

Why is angular not rendering content inside curly braces.

Object is displaying correctly in ng-inspector, so it is working that far. Not sure why content is not rendering on webpage. If I use ng-bind="bio.name" the content is rendered, but when I go back to braces the text disappears. I am fine using ng-bind however, I would still like to know what is causing the {{bio.name}} not to work. The main reason I am not using ng-bind is because I haven't found a way to ng-bind the url to the <a> tag.

Thanks in advance for any help. Let me know if you need any additional information.

js/app.js
//Define the UploadApp module
var uploadApp = angular.module('uploadApp', []);

js/controller/index.js

 'use strict'
angular.module('uploadApp')
.controller('indexCtrl', function($scope) {
  $scope.bios = [
     {
       name: "Malachi",
       bioText: "Bio Text here",
       githubLink: "Github link Placeholder",
       githubUsername: "username placeholder"
     },
     {
       name: "Matthew",
       bioText: "Bio Text here",
       githubLink: "Github link Placeholder",
       githubUsername: "username placeholder"
     },
     {
       name: "Michele",
       bioText: "Bio Text here",
       githubLink: "Github link Placeholder",
       githubUsername: "username placeholder"
     },
     {
       name: "Ryan",
       bioText: "Bio Text here",
       githubLink: "Github link Placeholder",
      githubUsername: "username placeholder"
     }
   ];
 });

 index.html
 <body ng-app="uploadApp">
  <h1 class="display-4 text-xs-center m-y-3" >Individuals Working on this project</h1>
   <div class="contributers-wraper" ng-controller='indexCtrl'>
    <div class="contributers" ng-repeat='bio in bios'>
     <h3 class="col-lg-3">{{bio.name}}</h3>
     <p>{{bio.text}}</p>
     <a href='{{bio.githubLink}}'>{{bio.githubUsername}}</a>
    </div>
   </div>
</body>

1 Answer

Malachi Danielewicz
Malachi Danielewicz
16,559 Points
Malachi Danielewicz
Malachi Danielewicz
16,559 Points

Woot! Figured it out!! I forgot express also uses curly braces and so there was a conflict. Changed the tags at the module initialization to:

//Define the UploadApp module
 var uploadApp = angular.module('uploadApp', []).config(function($interpolateProvider){           
 $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

That seems to have fixed the problem. Thankful for stackoverflow!!

http://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces

p.s. I already 'asked' a couple treehouse moderators to help me out. If you see this and have any other suggestions/advice on how to handle this problem I'm open to your best practice advice.

Thanks!

Steve Hunter
Steve Hunter
57,712 Points

Well done for fixing it! :+1: :smile: