Develop Reference

Vuejs Boolean Attributes (Truthy and Falsy values)

I'm reading the Vuejs docs and get confused at some point when I was at the part of Attribute Bindings (link to the specific part : https://vuejs.org/guide/essentials/template-syntax.html#boolean-attributes).
As far as I'm aware, in JavaScript, empty strings ("") are considered as falsy.
But, in Vuejs Docs:
<button :disabled="isButtonDisabled">Button</button>
The disabled attribute will be included if isButtonDisabled has a truthy value. It will also be included if the value is an empty string, maintaining consistency with <button disabled="">. For other falsy values the attribute will be omitted.
Here, they evaluate the empty string as a truthy value !
If someone has an explanation ? it's something that we should be aware of, or it's just a choice of Evan You (creator of Vuejs), but based on what ?
Thanks.

An empty string as value for the disabled HTML attribute, on elements which support it, is interpreted as a truthy value. This is the HTML standard.
<input disabled />
<!-- exact equivalent of... -->
<input disabled="" />
<!-- exact equivalent of (in Vue template) -->
<input :disabled='""' />
<!-- exact equivalent of (in JSX) -->
<input disabled={""} />
When provided as a binding JavaScript expression, Vue will not include the attribute when the expression is falsy, except when it evaluates to empty string. In that case, Vue will include the attribute, without changing its value.
Why is the warning there?
Because empty string is typically interpreted as falsy value in JavaScript and they identified this as a potential source of subtle bugs
The attribute's behavior is not Vue team's decision. It's W3C's decision.
So yeah, you can say it's "official". It can't get any more "official" than that.

Uppercase condition for polymer template

How to apply upperCase condition in template if in polymer. My code is:
if="[[ifIsOfType(abc.status,'final'.toUpperCase())]].
I applied this but its not working.

I believe Polymer cannot parse complex expressions in the HTML attributes since 1.0. So you have to move your conversion to the function you are calling.

How to remove in angular js?

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

How to use ng-translate with variables resolved from controller?

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)

Accessing scope params of children directives

I'm new in AngularJS, using it for two months in a project. I've learned how to use directives and theirs scopes (false, true, obj literal), but there's some questions about it...
First of all, we have some ng-repeats and directives with some behaviors, I tried to present a equivalent scenario in this link.
I didn't figure out how to access a function (testfn - within ng-controller) inside a directive child of another directive myItemDirective. But in myStepDirective it's accessible, I tried to pass it like in the first "layer" but didn't work.
PS.1: I created a myStepDirective with a isolated scope for other examples, if you need, just uncomment to test. Both I got a way to access params/functions from parent (controller), but not inside a grandchild.
Why directive's scope params doesn't work with camel case params? I don't remember to read some hint in AngularJS docs... typewithnocase inside myItemDirective works but typeList not.
Thanks!

EDITED]
For your 1. Here is a working fiddle working with limited scope and camel to snake case conversion : https://jsfiddle.net/wu0avqau/
I spend a loooooong time not understanding why it didn't worked but you juste forgot a = in your ng click inside your second directive
ng-click"testfn()"
For your 2. I can refer you to the documentation : https://docs.angularjs.org/guide/directive
Normalization
Angular normalizes an element's tag and attribute name to determine which >elements match which directives. We typically refer to directives by their case->sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case->insensitive, we refer to directives in the DOM by lower-case forms, typically >using dash-delimited attributes on DOM elements (e.g. ng-model).
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase."
basicaly your myItemDirective would be my-item-directive inside your template but still be myItemDirective inside your js.
Good luck,
Thibaud Lamarche