The ng:bind-attr
attribute specifies that
databindings should be created between element
attributes and given expressions. Unlike ng:bind
the ng:bind-attr
contains a JSON key value
pairs representing which attributes need to be mapped to which
expressions.
You don't usually write the ng:bind-attr
in the HTML since embedding
{{expression}} into the attribute directly as the attribute value is
preferred. The attributes get translated into <span ng:bind-attr="{attr:expression}"/>
at
compile time.
This HTML snippet is preferred way of working with ng:bind-attr
<a href="http://www.google.com/search?q={{query}}">Google</a>
The above gets translated to bellow during bootstrap time.
<a ng:bind-attr='{"href":"http://www.google.com/search?q={{query}}"}'>Google</a>
<ANY ng:bind-attr="attribute_json"> ... </ANY>
attribute_json – {string} –
a JSON key-value pairs representing the attributes to replace. Each key matches the attribute which needs to be replaced. Each value is a text template of the attribute with embedded {{expression}}s. Any number of key-value pairs can be specified.
Try it here: enter text in text box and click Google.
Google for: <input type="text" name="query" value="AngularJS"/> <a href="http://www.google.com/search?q={{query}}">Google</a>
it('should check ng:bind-attr', function(){ expect(using('.doc-example-live').element('a').attr('href')). toBe('http://www.google.com/search?q=AngularJS'); using('.doc-example-live').input('query').enter('google'); expect(using('.doc-example-live').element('a').attr('href')). toBe('http://www.google.com/search?q=google'); });