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

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