ng-bind-html breaks when using Javascript replace() with global value

Question

I'm trying to use ng-bind-html in hand with JavaScript's replace() function. It works just fine when I don't include a global value in replace(), but the moment I include something like replace(/test/g, 'TEST'), I get this in the console:

Syntax Error: Token '/' not a primary expression at column 95

This is what I'm trying to do, and also what gives me the error:

ng-bind-html="(resume.address == null || resume.address == '') ? 'Mailing Address' : resume.address.replace(/;/g, 'TEST')"

Have I made an obvious error that I am overlooking, and if so, what is the proper way to write this?

Edit:

My end goal is to replace a string, which contains multiple ";" characters, and have those characters be replaced with break elements that AngularJS will not sanitize into a string literal. If there is a better way of doing this, that answer is also welcome.

@o4ohel You might be right, but I'm still not entirely familiar with how to write directives. I have a basic idea, but I'm not sure how I would do something like this. — Drakken Saer
– Drakken Saer, Commented Nov 3, 2015 at 0:59
filters are easier to write then directives: docs.angularjs.org/guide/filter . Basically, you will write a function that takes a string and returns another string. So the logic you currently have inline will just move to the filter. ng-bind-html="resume.address | your_filter" — o4ohel
– o4ohel, Commented Nov 3, 2015 at 1:04
@o4ohel Thanks for your feedback! I will try this. I'll leave the question open though, I am very curious as to why Angular is not working with this expression. — Drakken Saer
– Drakken Saer, Commented Nov 3, 2015 at 1:06

o4ohel · Accepted Answer · 2015-11-03 01:09:45Z

1

This doesn't answer your question as to why angular throws the error. But it might help you get around it.

Create a filter:

angular.module('yourApp', []).filter('addressFilter', function() {
  return function(input) {
    input = input || 'Mailing Address';
    return input.replace(/;/g, 'TEST')";
  };
})

HTML:

ng-bind-html="resume.address | addressFilter"

answered Nov 3, 2015 at 1:09

o4ohel

1,78913 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Drakken Saer Over a year ago

Thank you, this does work for what I need. I would +1 this, but I'm so new to this site that it does not allow me to for the moment.

Collectives™ on Stack Overflow

ng-bind-html breaks when using Javascript replace() with global value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related