im currently using Angular implementation of the
Sweet alert
I want to pass to the title an Angular directive with translate
This is the variable I'm passing as title
{{ 'register.confirmation_modal.SUPERIOR_MESSAGE' | translate }}
And using Angular Compile Service
var translate_title = "<span>{{ 'sa.title' | translate }}</span>";
var compiled_title = $compile(translate_title)($scope);
and using html: true, in Sweet alert options
But i'm getting an object and it's being printed like the follow image
I tried using .innerHTML but it removes the Tags and gets the literal string with the curly braces {{ }}
JSON.stringify didn't worked either.
Any advice?
Credits to #Claies for pointing me to the solution
Instead of using $compile I solved my issue using the Filter translate from Angular translate
This did the trick:
var n = $filter('translate')('sa.title');
Regards.
Related
The angular expression is {{ notification.noti_val }}.
The value stored in the expression is saha like own wall.
How can I remove the characters?
You need to specify your value as safe html. In angular you can use $sceservice to do so. I have created this jsbin explaining the use case and it fixes your issue
I'm using ng-tranlate for i18n.
I'd like to combine a translated label together with a variable resolved from controller binding. How can I achieve the following?
<div translate="my.lang.text">some more: {{controller.attribute}}</div>
This does not work, and ng-translate ignores any content between the divs. why?
The translate directive will replace the content of the element with the translation you pass to it.
The use case you are describing looks like a parameterized translation. If you want to keep the use of the directive, you could pass the variable through the translate-values directive:
<div translate="my.lang.text"
translate-values="{value: 'some more: ' + controller.attribute}"></div>
You have to specify that your translation is parameterized:
JSON
"my.lang.text": "This is a parameterized string {value}"
I believe the translate directive replaces all the element's content with the translation.
In this case, you probably want to use the translate filter instead.
<div>{{'my.lang.text' | translate}} some more: {{controller.attribute}}</div>
As an alternative, you could also avoid this issue by giving the translated value it's own element.
<div><span translate="my.lang.text"></span> some more: {{controller.attribute}}</div>
If the translation is always intended to have have a value appended to it, then using a parameterized translation is probably the best solution (as suggested by Michael https://stackoverflow.com/a/33419608/90305)
I want to have a string that goes through angular's filter as a parameter for a javascript function. Angular doesn't parse it, how do I fix this?
<input type="text" ng-required="true" ng-model="foobar"
oninvalid="this.setCustomValidity({{ 'String' | myfilter }})">
The {{ .. }} does not go through Angular's parsing. If I remove the double quotation marks it still doesn't work as Angular 'fixes' it to be oninvalid="this.setCustomValidity("{{
Also, if there is another, more angular way of customizing the browser validation message, that would do the trick for me also.
You might want to read the angular documentation for input, in particular the example plunker provides the solution to your question.
If you still want a hint on what to do to use a filter in your argument please provide information about your oninvalid directive.
You can pass foobar directly
oninvalid="this.setCustomValidity({{ 'String' | myfilter(foobar) }})"
I'm using the following filter inside a h3:
{{ event.date | date:'dd-MM-yyyy' }}
And is working just fine, the angular is formatting and showing the date like I want. I'm trying to apply the same filter inside an ng-model:
ng-model="event.date | date:'dd-MM-yyyy'"
And this is not working, is throwing an error:
Error: ngModel:nonassign
Non-Assignable Expression
Expression 'event.date' is non-assignable. Element: {1}
Could you someone explain me why?
Thanks!
That is not possible the way you are trying to do.
An alternate solution will be using input masking. There are some libraries available already for the task such as ngMask and angular-input-masks.
https://github.com/candreoliveira/ngMask
https://github.com/assisrafael/angular-input-masks
From the documentation:
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope
https://docs.angularjs.org/api/ng/directive/ngModel
ng-model needs a variable that it can 2-way data-bind to but the filters output is not assignable.
I have a weird situation: due to our Django backend, we changed our frontend Angular braces to brackets, but now I can't access an object value dynamically, for example:
<div>[[ house.basement ]]</div>
<div>[[ house.attic ]]</div>
The above works, but below would not:
<div>[[ house[floor] ]]</div>
Is there a straight-forward solution here? I can use a function to look for the floor, but it'd be much less efficient.
Here is my simplified controller:
var MyCtrl = function($scope) {
$scope.floor = 'basement';
$scope.house = {
'basement': 'boo';
'attic': 'yay';
};
};
There's a radio button that controls floor model, but I don't think that's too relevant here.
EDIT
So based on comments, I was not being clear, I want to access the value of $scope.house based on how $scope.floor changes. This works perfectly fine in normal angular:
<div>{{ house[floor] }}</div>
And it would display 'boo'. The problem is because we changed braces to brackets, the interpreter breaks down and we're not sure how to escape properly.
Use ng-bind.
<div ng-bind='house[floor]'></div>
http://plnkr.co/edit/diL34NCmoUPcd3AZZ3jb?p=info