The ng:bind-attr
attribute specifies that a
databinding should be created between a particular
element attribute and a given expression. Unlike ng:bind
, the ng:bind-attr
contains one or
more JSON key value pairs; each pair specifies an attribute and the
expression to which it will be mapped.
Instead of writing ng:bind-attr
statements in your HTML, you can use double-curly markup to
specify an {{expression}} for the value of an attribute.
At compile time, the attribute is translated into an <span ng:bind-attr="{attr:expression}"/>
The following HTML snippet shows how to specify ng:bind-attr
:
<a href="http://www.google.com/search?q={{query}}">Google</a>
During compilation, the snippet gets translated to the following:
<a ng:bind-attr='{"href":"http://www.google.com/search?q={{query}}"}'>Google</a>
<ANY ng:bind-attr="attribute_json"> ... </ANY>
attribute_json – {string} –
one or more JSON key-value pairs representing the attributes to replace with expressions. Each key matches an attribute which needs to be replaced. Each value is a text template of the attribute with the embedded {{expression}}s. Any number of key-value pairs can be specified.
Enter a search string in the Live Preview text box and then click "Google". The search executes instantly.
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'); });