please look at this fiddle
please type 4 in the text area,
it should write an error message, that is in this line:
$names.push('<div ng-bind-html-unsafe="snippet"></div>');
actually it does not. It prints the html code itself without handling,
and the underlying html is:
<li ng-repeat="user in list|splitList:appUsers" class="ng-scope ng-binding">
<div ng-bind-html="snippet"></div>
</li>
I tried to follow solutions from this topic
but nothing seem to help,
any help in fixing it will be regarded,
I got help from the chat room of angularjs,
the thing is that I should use:
<div ng-bind-html-unsafe="user">...</div>
instead of {{user}}
To get it to work you will need the following:
Declare it in html
div ng-bind-html="{expression}"></div>
Or
div class="ng-bind-html: {expression};"></div>
AND
reference angular-sanitize.min.js and then add
angular.module('YOUR_APP_NAME', ['ngSanitize']);
The last two are in the angularjs documentation for some reason...
Related
I'm learning how to translate values in angularjs.
I have created a plunker from the example given in here
The plunker link is in here: http://plnkr.co/edit/rkARrvV2tco42VKdfaJI?p=preview
For a quick glance:
<div ng-controller="Ctrl">
<p translate="VARIABLE_REPLACEMENT" translate-values="{ name: '<b>example html</b>'}"></p>
</div>
gives me output as
Hi, example html (since '<b>example html</b>' gets translated to example html
My expectation is to get a string similar to
Hi, <b>example html</b> instead of Hi, example html
Any ideas How do I achieve that?
Are there any flags to do the same?
EDIT: I could not find any such flag at the site
The documentation has the solution at
https://angular-translate.github.io/docs/#/guide/19_security
where you can set Sanitization Strategy.
like $translateProvider.useSanitizeValueStrategy('sanitize')
I'm trying to write a small directive that will append the validation tags and ngMessages dynamically to the input. But I'm having trouble appending the ng-message attribute to the div.
The idea is to have this,
<div validator validations="{json_data containing error messages}">
<input name='fieldName'>
</div>
Turned in to the following according to the provided JSON.
<div validator>
<input required="required"></input>
<div ng-message="fieldName" ng-if="fieldName.$dirty>
<p ng-message="required"> scope.message </p>
</div>
</div>
I've currently managed to get the ng-required appeneded using the answer to this answer. But I can't seem to append the ng-message tag using the same technique. What should be done differently to solve this issue?
The final directive should be able to generate something like this Fiddle
The current version can be found in the Fiddle here the example works as expected until 'scope' is added. But as soon as 'scope' is added, the example stops working.
Update
I've realized that this only occurse when you add a local scope. This error doesn't occure when using the global scope and accessing the variable using scope.$eval(attrs.message)
I am using a cool little AngularJS filter for emoji characters located at: http://dev.venntro.com/angular-emoji-filter/ and this is my code I have so far.
<p class="chatmessage plain ng-binding" ng-repeat="message in messages track by $index" ng-model="message" ng-bind-html-unsafe="message | emoji">
<b>{{message.Author}}:</b>{{message.Message|emoji}}
</p>
It gives me the following output:
User123: <i class='emoji emoji_smiley'>smiley</i>
obviously, I'd rather have the emoji icon, but that is what gets output to the page. This is almost a win for me even at this stage as I had to figure out how to add all of the appropriate references to get the message filter to work and get this far. Now I am trying to come up with a way to make the "message.Message" render the HTML rather than just giving me the HTML code itself.
I am wondering if there is a function that I can wrap around that to force it to render this emoji rather than the HTML?
Thank you for any help
Sincerely,
New kid to AngularJS
I think you need to try with below ng-repeat code :
<p class="chatmessage plain" ng-repeat="message in messages track by $index">
<b>{{message.Author}}:</b><p ng-bind-html-unsafe="message.Message | emoji"></p>
</p>
I am new to AngularJS but I have searched extensively and could not find a working answer to this question, maybe its just not possible the way I have it in mind.
What I would like is to be able to combine error conditions so that I can use more generic error messages in the ng-messages module. This saves us a lot of time maintaining texts as our application is multi-lingual. In my example it would be great to combine minlength, maxlength, and pattern and have it reference 1 generic message. The only way I have gotten it to work is for a separate ng-message for each type and then reuse the error text which seems redundant to me. Hopefully it's something short I am missing like not understanding when/how to use , or ||.
<form id="myFormId" name="myForm" novalidate>
<input name="sText" ng-model="someText"
type="text"
required
ng-minlength="8" minlength="8"
ng-maxlength="8" maxlength="8"
ng-pattern="/^[a-zA-Z0-9]{8,8}$/" pattern="/^[a-zA-Z0-9]{8,8}$/">
<div ng-messages="myForm.sText.$error" role="alert">
Error message:
<div ng-message="required">Required text missing</div>
<div ng-message="minlength || maxlength || pattern">Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of || </div>
<div ng-message="minlength">Too short - this does work but does not change even if this is removed</div>
</div>
</form>
I have created this simple Plunk to illustrate what I am trying to do:
EDIT 1
I do realize I could use a single regex pattern expression but the above validations is strictly to reproduce the issue and show an example. I have other validations I would like to combine that could not be expressed with a single pattern.
ng-messages will show error message inside ng-messages directive element, but that has limitation that you could only display single error ng-message inside the ng-messages div.
So if you wanted to show multiple ng-message inside ng-messages directive you need to add ng-messages-multiple attribute on ng-messages directive element.
Docs Link
Markup
<div ng-messages="myForm.sText.$error" role="alert" ng-messages-multiple>
Error message:
<div ng-message="required">
Required text missing
</div>
<div ng-message="minlength, maxlength, pattern">
Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of ||(OR)
</div>
<div ng-message="minlength">
Too short - this does work but does not change even if this is removed
</div>
</div>
Working Plunkr
Update
After angular document updation I came to know that ng-messages doesn't support to show multiple ng-message error inside ng-messages, for solving this problem we should have ng-messages-multiple attribute on ng-messages element.
From Docs
By default, ngMessages will only display one error at a time. However, if you wish to display all messages then the ng-messages-multiple attribute flag can be used on the element containing the ngMessages directive to make this happen.
Markup
<div ng-messages="myForm.sText.$error" role="alert" ng-messages-multiple>
Error message:
<div ng-message="required">
Required text missing
</div>
<div ng-message="minlength, maxlength, pattern">
Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of ||(OR)
</div>
<div ng-message="minlength">
Too short - this does work but does not change even if this is removed
</div>
</div>
Working Plunkr
In Angular 1.4 you can specify multiple errors for a ng-message:
<div ng-message="minlength, maxlength">
Your email must be between 5 and 100 characters long
</div>
See documentation
Inorder to make your ng-message more generic you can keep all your error messages at one place and use it when required. You could do this using ng-message-include.
Have a look at : Reusing and Overriding Error Messages
http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html#reusing-and-overriding-error-messages.
I think you will like to implement this.
I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/