angular.directive.ng:bind-attr

Work In Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

Description

The ng:bind-attr attribute specifies that the element attributes which should be replaced by the expression in it. Unlike ng:bind the ng:bind-attr contains a JSON key value pairs representing which attributes need to be changed. You don’t usually write the ng:bind-attr in the HTML since embedding {{expression}} into the attribute directly is the preferred way. The attributes get translated into <span ng:bind-attr="{attr:expression}"/> at bootstrap time.

This HTML snippet is preferred way of working with ng:bind-attr

  Google

The above gets translated to bellow during bootstrap time.

  Google

Usage

In HTML Template Binding

<ANY ng:bind-attr="attribute_json">
  ...
</ANY>
  

Parameters

Example

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'); });