# 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 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>

## Usage

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

### Parameters

- `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.

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