Single/double quotes in ng-init

Question

Let's say we are passing initial data from php to Angular' view by Mustache, and the data is some string that contain quotes, like "Can't delete item". Mustache by default translates the single quote to the ' like:

 ng-init="message='Can&#039;t delete item'"

but that causes some kind of Angular parsing problem:

Lexer Error: Unterminated quote at columns ... ['] in expression [message='Can't delete item']

I can't use Mustache' triple curlies because then it will be like:

 ng-init="message='Can't delete item'"

with the same error in output.

Plunk: http://plnkr.co/edit/GCq4gLrD1NxxCvAsjHy9?p=preview

How can we elegantly solve it on Mustache stage?

You should clarify your question's title. Can't you replace `'` by `\'` and `"` by `\"` before angular parsing? — glepretre, Nov 06 '14 at 08:22
could not you initialise the value from your controller (or directive's link function)? — artur grzesiak, Nov 10 '14 at 09:09
@arturgrzesiak no , it is a part of an old system (with a specific server/client relations scheme) that i can not change. what is Angular parsing mechanism' problem with a `'` ? — Ivan Chernykh, Nov 10 '14 at 09:36
@Cherniv did not go deep into it, but if you proceed `'` with \ then it seems to work fine: [http://plnkr.co/edit/HPmadiLEHBHs5l6XLKiV?p=preview](http://plnkr.co/edit/HPmadiLEHBHs5l6XLKiV?p=preview) — artur grzesiak, Nov 10 '14 at 10:05
@arturgrzesiak my Mustache runs on php , and it looks like: `ng-init="message='{{delete_message}}"` , so how am i able to put the `\\` there? — Ivan Chernykh, Nov 10 '14 at 10:11
@Cherniv I do not use/know php: do you mean that `delete_message` cannot be set to: "Can\'t delete item" in php or you are not able to change `delete_message` value at all? — artur grzesiak, Nov 10 '14 at 10:17
@arturgrzesiak i cannot change `delete_message` value at all, and i'm sure that the problem is in angular because `'Can\'t delete item'` seems to be a valid string , so i want to find a solution related to angular — Ivan Chernykh, Nov 10 '14 at 10:21
@Cherniv The problem is that angular's lexer interprets unicode encoded characters. It seems to be an angular's bug. Check if this would work for you (order of double/single quotes changed): http://plnkr.co/edit/NaKdD4OquzBftxyls0B4?p=preview. — artur grzesiak, Nov 10 '14 at 15:37

score 2 · Answer 1 · answered Nov 16 '14 at 18:45

2

I created a directive to place your content in, It will assign the body of directive to scope.message variable.

app.directive('myMessageVar',function(){
  return{
            restrict :'A',
            scope:{
              message:'=myMessageVar'
            },
            link: function (scope, iElement, iAttrs) {
               scope.message=iElement.text(); 
               iElement.text('');
          }
   }

})

In HTML

 <span my-message-var="message">Can&#039;t delete item</span>

Plunkr: http://plnkr.co/edit/QRtXLX1IiGS6VV0Rc78I?p=preview

answered Nov 16 '14 at 18:45

Sridhar Chidurala

546
4
15

thank you, but unfortunately i can't change the markup' structure – Ivan Chernykh Nov 20 '14 at 14:04
This is an elegant solution. Thanks! – AngularNerd Aug 05 '21 at 05:15

score 1 · Answer 2 · answered Nov 05 '14 at 12:41

1

Just escape the quote :

ng-init="message='Can\'t delete item'"

answered Nov 05 '14 at 12:41

AlexHv

1,694
14
21

I can't do it because the html coming already broken from server – Ivan Chernykh Nov 05 '14 at 12:55

score 1 · Answer 3 · answered Nov 05 '14 at 12:41

1

Escape the single quote with the backslash \ like this:

ng-init="message='Can\'t delete item'"

answered Nov 05 '14 at 12:41

Giwwel

347
1
4

the same thing for esacping the double quotes – Giwwel Nov 05 '14 at 12:44
I can't do it because the html coming already broken from server – Ivan Chernykh Nov 05 '14 at 12:54
if you use php for getting data from server, please try `htmlspecialchars_decode ` – Giwwel Nov 05 '14 at 13:00
how can i combine it with Mustache? – Ivan Chernykh Nov 05 '14 at 13:02
See here for inspiration to integrate htmlspecialchars_decode() with Mustache: http://stackoverflow.com/questions/17195443/how-to-use-function-wrapper-in-mustache-php – Werner Nov 05 '14 at 13:45
@Werner you mean creating of some php helper function needed? – Ivan Chernykh Nov 11 '14 at 06:59
@Cherniv Yes, I'm talking about creating a Lambda, then you will have a solution tailored to your needs: https://github.com/bobthecow/mustache.php/wiki/Mustache-Tags#lambdas – Werner Nov 11 '14 at 10:41

score 1 · Answer 4 · answered Nov 14 '14 at 14:44

1

Try switching the double quotes and the single quotes.

so instead of

ng-init="message='{{delete_message}}'"

try

ng-init='message="{{delete_message}}"'

answered Nov 14 '14 at 14:44

cortexjesse

171
6

Thanks, but this way if i will have double quote in my `delete_message` the error will appear again – Ivan Chernykh Nov 14 '14 at 14:49

score 1 · Answer 5 · answered Jul 01 '16 at 06:29

I came across with this problem today and I did not find much of an answer. But this piece of code works for me.

<?php $data_slashed = htmlentities(addslashes(html_entity_decode($data,ENT_QUOTES)),ENT_QUOTES); ?>

Where $data is some data that were encoded using htmlentities.

Then you can now do this

<p ng-bind-html= "data" ng-init="data='<?php echo $data_slashed; ?>'" />

I have not tried mustache but this works for my php template. Hope this help someone else.

score 0 · Answer 6 · answered Nov 14 '14 at 11:44

I believe you're using init incorrectly. From ngInit docs:

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

For passing values from your server-side I think you should either use $http (AJAX) or Module.constant/Module.value from angular.Module.

For example:

// define a value
app.value('message','Can&#039;t delete item');

// define a constant
app.constant('constMessage', 'Can&#039;t delete item');

You can then inject them into services or controllers. e.g, for a controller:

// use it in a controller
app.controller('someController', ['$scope', 'message', 'constMessage', 
function($scope, message, constMessage) {
    $scope.message = message;
    $scope.constMessage = constMessage;
});

Thank you, i know about `value` and `constant` and i'm using them in my another projects (http://stackoverflow.com/questions/18097923/angularjs-getting-data-inserted-in-dom/18097924), but in this specific project i able to use only the `ng-init` directive for passing data — Ivan Chernykh, Nov 14 '14 at 13:09

score 0 · Answer 7 · answered Nov 15 '14 at 21:16

0

This may work if your problem is limited to single quotes

ng-init='message="Can&#039;t delete item"'

answered Nov 15 '14 at 21:16

Sridhar Chidurala

546
4
15

score 0 · Answer 8 · answered Nov 17 '14 at 06:23

0

Try below code it should work.

<body ng-controller="MainCtrl" ng-init='message="Can't delete item"'> <p>Message: {{message}}</p> </body>

answered Nov 17 '14 at 06:23

Rishi Saraf

1,644
2
14
27

Single/double quotes in ng-init

8 Answers8