angular.directive.ng:bind-attr

Description

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>

Usage

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

Parameters

Example

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