Added Directives

3 files changed, 586 insertions, 7 deletions

diff --git a/src/Angular.js b/src/Angular.js
index e6e7be8d..a1477e35 100644
--- a/src/Angular.js
+++ b/src/Angular.js
@@ -17,7 +17,7 @@ var lowercase = function (value){ return isString(value) ? value.toLowerCase() :
 
 /**
  * @ngdoc
- * @name angular#uppercase
+ * @name angular.uppercase
  * @function
  *
  * @description Converts string to uppercase.
@@ -150,6 +150,21 @@ var _undefined        = undefined,
      *   };
      * });
      * </pre>
+     * 
+     * @example
+     * <script>
+     *   angular.widget('my:time', function(compileElement){
+     *     compileElement.css('display', 'block');
+     *     return function(linkElement){
+     *       function update(){
+     *         linkElement.text('Current time is: ' + new Date());
+     *         setTimeout(update, 1000);
+     *       }
+     *       update();
+     *     };
+     *   });
+     * </script>
+     * <my:time></my:time>
      */
     angularWidget     = extensionMap(angular, 'widget', lowercase),
     
@@ -366,15 +381,19 @@ var _undefined        = undefined,
      * });
      * </script>
      *
-     * Formatted: <input type="text" name="data" value="&lt;angular/&gt;" ng:format="reverse"/><br/>
-     * Stored: <input type="text" name="data"/><br/>
+     * Formatted: 
+     * <input type="text" name="data" value="angular" ng:format="reverse"/>
+     * <br/>
+     * 
+     * Stored: 
+     * <input type="text" name="data"/><br/>
      * <pre>{{data}}</pre>
      *
      * 
      * @scenario
      * it('should store reverse', function(){
-     *  expect(element('.doc-example input:first').val()).toEqual('<angular/>');
-     *  expect(element('.doc-example input:last').val()).toEqual('>/RALUGNA<');
+     *  expect(element('.doc-example input:first').val()).toEqual('angular');
+     *  expect(element('.doc-example input:last').val()).toEqual('RALUGNA');
      *  
      *  this.addFutureAction('change to XYZ', function($window, $document, done){
      *    $document.elements('.doc-example input:last').val('XYZ').trigger('change');
diff --git a/src/directives.js b/src/directives.js
index e21dca89..7dcc7f39 100644
--- a/src/directives.js
+++ b/src/directives.js
@@ -1,9 +1,97 @@
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:init
+ *
+ * @description
+ * `ng:init` attribute allows the for initialization tasks to be executed 
+ *  before the template enters execution mode during bootstrap.
+ *
+ * @element ANY
+ * @param {expression} expression to eval.
+ *
+ * @example
+    <div ng:init="greeting='Hello'; person='World'">
+      {{greeting}} {{person}}!
+    </div>
+ *
+ * @scenario
+   it('should check greeting', function(){
+     expect(binding('greeting')).toBe('Hello');
+     expect(binding('person')).toBe('World');
+   });
+ */
 angularDirective("ng:init", function(expression){
   return function(element){
     this.$tryEval(expression, element);
   };
 });
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:controller
+ *
+ * @description
+ * To support the Model-View-Controller design pattern, it is possible 
+ * to assign behavior to a scope through `ng:controller`. The scope is 
+ * the MVC model. The HTML (with data bindings) is the MVC view. 
+ * The `ng:controller` directive specifies the MVC controller class
+ *
+ * @element ANY
+ * @param {expression} expression to eval.
+ *
+ * @example
+    <script type="text/javascript">
+      function SettingsController() {
+        this.name = "John Smith";
+        this.contacts = [
+          {type:'phone', value:'408 555 1212'},
+          {type:'email', value:'john.smith@example.org'} ];
+      }
+      SettingsController.prototype = {
+       greet: function(){
+         alert(this.name);
+       },
+       addContact: function(){
+         this.contacts.push({type:'email', value:'yourname@example.org'});
+       },
+       removeContact: function(contactToRemove) {
+         angular.Array.remove(this.contacts, contactToRemove);
+       },
+       clearContact: function(contact) {
+         contact.type = 'phone';
+         contact.value = '';
+       }
+      };
+    </script>
+    <div ng:controller="SettingsController">
+      Name: <input type="text" name="name"/> 
+      [ <a href="" ng:click="greet()">greet</a> ]<br/>
+      Contact:
+      <ul>
+        <li ng:repeat="contact in contacts">
+          <select name="contact.type">
+             <option>phone</option>
+             <option>email</option>
+          </select>
+          <input type="text" name="contact.value"/>
+          [ <a href="" ng:click="clearContact(contact)">clear</a> 
+          | <a href="" ng:click="removeContact(contact)">X</a> ]
+        </li>
+        <li>[ <a href="" ng:click="addContact()">add</a> ]</li>
+     </ul>
+    </div>
+ *
+ * @scenario
+   it('should check controller', function(){
+     expect(element('.doc-example-live div>:input').val()).toBe('John Smith');
+     expect(element('.doc-example-live li[ng\\:repeat-index="0"] input').val()).toBe('408 555 1212');
+     expect(element('.doc-example-live li[ng\\:repeat-index="1"] input').val()).toBe('john.smith@example.org');
+     element('.doc-example-live li:first a:contains("clear")').click();
+     expect(element('.doc-example-live li:first input').val()).toBe('');
+     element('.doc-example-live li:last a:contains("add")').click();
+     expect(element('.doc-example-live li[ng\\:repeat-index="2"] input').val()).toBe('yourname@example.org');
+   });
+ */
 angularDirective("ng:controller", function(expression){
   this.scope(true);
   return function(element){
@@ -16,12 +104,75 @@ angularDirective("ng:controller", function(expression){
   };
 });
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:eval
+ *
+ * @description
+ * The `ng:eval` allows you to execute a binding which has side effects 
+ * without displaying the result to the user.
+ *
+ * @element ANY
+ * @param {expression} expression to eval.
+ *
+ * @exampleDescription
+ * Notice that `{{` `obj.multiplied = obj.a * obj.b` `}}` has a side effect of assigning 
+ * a value to `obj.multiplied` and displaying the result to the user. Sometimes, 
+ * however, it is desirable to execute a side effect without showing the value to 
+ * the user. In such a case `ng:eval` allows you to execute code without updating 
+ * the display.
+ * 
+ * @example
+ *   <input name="obj.a" value="6" > 
+ *     * <input name="obj.b" value="2"> 
+ *     = {{obj.multiplied = obj.a * obj.b}} <br>
+ *   <span ng:eval="obj.divide = obj.a / obj.b"></span>
+ *   <span ng:eval="obj.updateCount = 1 + (obj.updateCount||0)"></span>
+ *   <tt>obj.divide = {{obj.divide}}</tt><br/>
+ *   <tt>obj.updateCount = {{obj.updateCount}}</tt>
+ *
+ * @scenario
+   it('should check eval', function(){
+     expect(binding('obj.divide')).toBe('3');
+     expect(binding('obj.updateCount')).toBe('2');
+     input('obj.a').enter('12');
+     expect(binding('obj.divide')).toBe('6');
+     expect(binding('obj.updateCount')).toBe('3');
+   });
+ */
 angularDirective("ng:eval", function(expression){
   return function(element){
     this.$onEval(expression, element);
   };
 });
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:bind
+ *
+ * @description
+ * The `ng:bind` attribute asks <angular/> to replace the text content of this 
+ * HTML element with the value of the given expression and kept it up to 
+ * date when the expression's value changes. Usually you just write 
+ * {{expression}} and let <angular/> compile it into 
+ * <span ng:bind="expression"></span> at bootstrap time.
+ * 
+ * @element ANY
+ * @param {expression} expression to eval.
+ *
+ * @exampleDescription
+ * Try it here: enter text in text box and watch the greeting change.
+ * @example
+ * Enter name: <input type="text" name="name" value="Whirled">. <br>
+ * Hello <span ng:bind="name" />!
+ * 
+ * @scenario
+   it('should check ng:bind', function(){
+     expect(using('.doc-example-live').binding('name')).toBe('Whirled');
+     using('.doc-example-live').input('name').enter('world');
+     expect(using('.doc-example-live').binding('name')).toBe('world');
+   });
+ */
 angularDirective("ng:bind", function(expression, element){
   element.addClass('ng-binding');
   return function(element) {
@@ -98,6 +249,38 @@ function compileBindTemplate(template){
   return fn;
 }
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:bind-template
+ *
+ * @description
+ * The `ng:bind-template` attribute specifies that the element 
+ * text should be replaced with the template in ng:bind-template. 
+ * Unlike ng:bind the ng:bind-template can contain multiple `{{` `}}` 
+ * expressions. (This is required since some HTML elements 
+ * can not have SPAN elements such as TITLE, or OPTION to name a few.
+ * 
+ * @element ANY
+ * @param {string} template of form
+ *   <tt>{{</tt> <tt>expression</tt> <tt>}}</tt> to eval.
+ *
+ * @exampleDescription
+ * Try it here: enter text in text box and watch the greeting change.
+ * @example
+    Salutation: <input type="text" name="salutation" value="Hello"><br/>
+    Name: <input type="text" name="name" value="World"><br/>
+    <pre ng:bind-template="{{salutation}} {{name}}!"></pre>
+ * 
+ * @scenario
+   it('should check ng:bind', function(){
+     expect(using('.doc-example-live').binding('{{salutation}} {{name}}')).
+       toBe('Hello World!');
+     using('.doc-example-live').input('salutation').enter('Greetings');
+     using('.doc-example-live').input('name').enter('user');
+     expect(using('.doc-example-live').binding('{{salutation}} {{name}}')).
+       toBe('Greetings user!');
+   });
+ */
 angularDirective("ng:bind-template", function(expression, element){
   element.addClass('ng-binding');
   var templateFn = compileBindTemplate(expression);
@@ -118,6 +301,55 @@ var REMOVE_ATTRIBUTES = {
   'readonly':'readOnly',
   'checked':'checked'
 };
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:bind-attr
+ *
+ * @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 
+ * <tt ng:non-bindable>{{expression}}</tt> 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`
+ * <pre>
+ *   <a href="http://www.google.com/search?q={{query}}">Google</a>
+ * </pre>
+ * 
+ * The above gets translated to bellow during bootstrap time.
+ * <pre>
+ *   <a ng:bind-attr='{"href":"http://www.google.com/search?q={{query}}"}'>Google</a>
+ * </pre>
+ * 
+ * @element ANY
+ * @param {string} attribute_json 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 
+ *    <tt ng:non-bindable>{{expression}}</tt>s. Any number of 
+ *    key-value pairs can be specified.
+ *
+ * @exampleDescription
+ * Try it here: enter text in text box and click Google.
+ * @example
+    Google for: 
+    <input type="text" name="query" value="AngularJS"/> 
+    <a href="http://www.google.com/search?q={{query}}">Google</a>
+ * 
+ * @scenario
+   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');
+   });
+ */
 angularDirective("ng:bind-attr", function(expression){
   return function(element){
     var lastValue = {};
@@ -146,8 +378,82 @@ angularDirective("ng:bind-attr", function(expression){
   };
 });
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:non-bindable
+ *
+ * @description
+ * Sometimes it is necessary to write code which looks like 
+ * bindings but which should be left alone by <angular/>. 
+ * Use `ng:non-bindable` to ignore a chunk of HTML.
+ * 
+ * @element ANY
+ * @param {string} ignore 
+ *
+ * @exampleDescription
+ * In this example there are two location where 
+ * <tt ng:non-bindable>{{1 + 2}}</tt> is present, but the one 
+ * wrapped in `ng:non-bindable` is left alone
+ * @example
+    <div>Normal: {{1 + 2}}</div>
+    <div ng:non-bindable>Ignored: {{1 + 2}}</div>
+ * 
+ * @scenario
+   it('should check ng:non-bindable', function(){
+     expect(using('.doc-example-live').binding('1 + 2')).toBe('3');
+     expect(using('.doc-example-live').element('div:last').text()).
+       toMatch(/1 \+ 2/);
+   });
+ */
 angularWidget("@ng:non-bindable", noop);
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:repeat
+ *
+ * @description
+ * `ng:repeat` instantiates a template once per item from a 
+ * collection. The collection is enumerated with 
+ * `ng:repeat-index` attribute starting from 0. Each template 
+ * instance gets its own scope where the given loop variable 
+ * is set to the current collection item and `$index` is set 
+ * to the item index or key.
+ * 
+ * NOTE: `ng:repeat` looks like a directive, but is actually a 
+ * attribute widget.
+ * 
+ * @element ANY
+ * @param {repeat} repeat_expression to itterate over.
+ * 
+ *   * `variable in expression`, where variable is the user 
+ *     defined loop variable and expression is a scope expression 
+ *     giving the collection to enumerate. For example: 
+ *     `track in cd.tracks`.
+ *   * `(key, value) in expression`, where key and value can 
+ *     be any user defined identifiers, and expression is the 
+ *     scope expression giving the collection to enumerate. 
+ *     For example: `(name, age) in {'adam':10, 'amalie':12}`.
+ *
+ * @exampleDescription
+ * This example initializes the scope to a list of names and 
+ * than uses `ng:repeat` to display every person.
+ * @example
+    <div ng:init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
+      I have {{friends.length}} friends. They are:
+      <ul>
+        <li ng:repeat="friend in friends"> 
+          [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
+        </li>
+      </ul>
+    </div>
+ * @scenario
+   it('should check ng:repeat', function(){
+     var r = using('.doc-example-live').repeater('ul li'); 
+     expect(r.count()).toBe(2);
+     expect(r.row(0)).toEqual(["1","John","25"]);
+     expect(r.row(1)).toEqual(["2","Mary","28"]);
+   });
+ */
 angularWidget("@ng:repeat", function(expression, element){
   element.removeAttr('ng:repeat');
   element.replaceWith(this.comment("ng:repeat: " + expression));
@@ -205,6 +511,29 @@ angularWidget("@ng:repeat", function(expression, element){
 });
 
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:click
+ *
+ * @description
+ * The ng:click allows you to specify custom behavior when 
+ * element is clicked.
+ * 
+ * @element ANY
+ * @param {expression} expression to eval upon click.
+ *
+ * @example
+    <button ng:click="count = count + 1" ng:init="count=0">
+      Increment
+    </button>
+    count: {{count}}
+ * @scenario
+   it('should check ng:click', function(){
+     expect(binding('count')).toBe('0');
+     element('.doc-example-live :button').click();
+     expect(binding('count')).toBe('1');
+   });
+ */
 /*
  * A directive that allows creation of custom onclick handlers that are defined as angular
  * expressions and are compiled and executed within the current scope.
@@ -226,6 +555,35 @@ angularDirective("ng:click", function(expression, element){
 
 
 /**
+ * @ngdoc directive
+ * @name angular.directive.ng:submit
+ *
+ * @description
+ * 
+ * @element form
+ * @param {expression} expression to eval.
+ *
+ * @exampleDescription
+ * @example
+ * <form ng:submit="list.push(text);text='';" ng:init="list=[]">
+ *   Enter text and hit enter: 
+ *   <input type="text" name="text" value="hello"/>
+ * </form>
+ * <pre>list={{list}}</pre>
+ * @scenario
+   it('should check ng:submit', function(){
+     expect(binding('list')).toBe('list=[]');
+     element('.doc-example-live form input').click();
+     this.addFutureAction('submit from', function($window, $document, done) {
+       $window.angular.element(
+         $document.elements('.doc-example-live form')).
+           trigger('submit');
+       done();
+     });
+     expect(binding('list')).toBe('list=["hello"]');
+   });
+ */
+/**
  * Enables binding angular expressions to onsubmit events.
  *
  * Additionally it prevents the default action (which for form means sending the request to the
@@ -243,6 +601,32 @@ angularDirective("ng:submit", function(expression, element) {
 });
 
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:watch
+ *
+ * @description
+ * The `ng:watch` allows you watch a variable and then execute 
+ * an evaluation on variable change.
+ * 
+ * @element ANY
+ * @param {expression} expression to eval.
+ *
+ * @exampleDescription
+ * Notice that the counter is incremented 
+ * every time you change the text.
+ * @example
+    <div ng:init="counter=0" ng:watch="name: counter = counter+1">
+      <input type="text" name="name" value="hello"><br/>
+      Change counter: {{counter}} Name: {{name}}
+    </div>
+ * @scenario
+   it('should check ng:watch', function(){
+     expect(using('.doc-example-live').binding('counter')).toBe('1');
+     using('.doc-example-live').input('name').enter('abc');
+     expect(using('.doc-example-live').binding('counter')).toBe('2');
+   });
+ */
 angularDirective("ng:watch", function(expression, element){
   return function(element){
     var self = this;
@@ -271,10 +655,141 @@ function ngClass(selector) {
   };
 }
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:class
+ *
+ * @description
+ * The `ng:class` allows you to set CSS class on HTML element 
+ * conditionally.
+ * 
+ * @element ANY
+ * @param {expression} expression to eval.
+ *
+ * @exampleDescription
+ * @example
+    <input type="button" value="set" ng:click="myVar='ng-input-indicator-wait'">
+    <input type="button" value="clear" ng:click="myVar=''">
+    <br>
+    <span ng:class="myVar">Sample Text &nbsp;&nbsp;&nbsp;&nbsp;</span>
+ * 
+ * @scenario
+   it('should check ng:class', function(){
+     expect(element('.doc-example-live span').attr('className')).not().
+       toMatch(/ng-input-indicator-wait/);
+
+     using('.doc-example-live').element(':button:first').click();
+
+     expect(element('.doc-example-live span').attr('className')).
+       toMatch(/ng-input-indicator-wait/);
+
+     using('.doc-example-live').element(':button:last').click();
+     
+     expect(element('.doc-example-live span').attr('className')).not().
+       toMatch(/ng-input-indicator-wait/);
+   });
+ */
 angularDirective("ng:class", ngClass(function(){return true;}));
+
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:class-odd
+ *
+ * @description
+ * The `ng:class-odd` and `ng:class-even` works exactly as 
+ * `ng:class`, except it works in conjunction with `ng:repeat` 
+ * and takes affect only on odd (even) rows.
+ *
+ * @element ANY
+ * @param {expression} expression to eval. Must be inside 
+ * `ng:repeat`.
+
+ *
+ * @exampleDescription
+ * @example
+    <ol ng:init="names=['John', 'Mary', 'Cate', 'Suz']">
+      <li ng:repeat="name in names">
+       <span ng:class-odd="'ng-format-negative'"
+             ng:class-even="'ng-input-indicator-wait'">
+         {{name}} &nbsp; &nbsp; &nbsp; 
+       </span>
+      </li>
+    </ol>
+ * 
+ * @scenario
+   it('should check ng:class-odd and ng:class-even', function(){
+     expect(element('.doc-example-live li:first span').attr('className')).
+       toMatch(/ng-format-negative/);
+     expect(element('.doc-example-live li:last span').attr('className')).
+       toMatch(/ng-input-indicator-wait/);
+   });
+ */
 angularDirective("ng:class-odd", ngClass(function(i){return i % 2 === 0;}));
+
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:class-even
+ *
+ * @description
+ * The `ng:class-odd` and `ng:class-even` works exactly as 
+ * `ng:class`, except it works in conjunction with `ng:repeat` 
+ * and takes affect only on odd (even) rows.
+ *
+ * @element ANY
+ * @param {expression} expression to eval. Must be inside 
+ * `ng:repeat`.
+
+ *
+ * @exampleDescription
+ * @example
+    <ol ng:init="names=['John', 'Mary', 'Cate', 'Suz']">
+      <li ng:repeat="name in names">
+       <span ng:class-odd="'ng-format-negative'"
+             ng:class-even="'ng-input-indicator-wait'">
+         {{name}} &nbsp; &nbsp; &nbsp; 
+       </span>
+      </li>
+    </ol>
+ * 
+ * @scenario
+   it('should check ng:class-odd and ng:class-even', function(){
+     expect(element('.doc-example-live li:first span').attr('className')).
+       toMatch(/ng-format-negative/);
+     expect(element('.doc-example-live li:last span').attr('className')).
+       toMatch(/ng-input-indicator-wait/);
+   });
+ */
 angularDirective("ng:class-even", ngClass(function(i){return i % 2 === 1;}));
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:show
+ *
+ * @description
+ * The `ng:show` and `ng:hide` allows you to show or hide a portion
+ * of the HTML conditionally.
+ * 
+ * @element ANY
+ * @param {expression} expression if truthy then the element is 
+ * shown or hidden respectively.
+ *
+ * @exampleDescription
+ * @example
+    Click me: <input type="checkbox" name="checked"><br/>
+    Show: <span ng:show="checked">I show up when you checkbox is checked?</span> <br/>
+    Hide: <span ng:hide="checked">I hide when you checkbox is checked?</span>
+ * 
+ * @scenario
+   it('should check ng:show / ng:hide', function(){
+     expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
+     expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
+     
+     input('checked').check();
+     
+     expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
+     expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
+   });
+ */
 angularDirective("ng:show", function(expression, element){
   return function(element){
     this.$onEval(function(){
@@ -283,6 +798,35 @@ angularDirective("ng:show", function(expression, element){
   };
 });
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:hide
+ *
+ * @description
+ * The `ng:show` and `ng:hide` allows you to show or hide a portion
+ * of the HTML conditionally.
+ * 
+ * @element ANY
+ * @param {expression} expression if truthy then the element is 
+ * shown or hidden respectively.
+ *
+ * @exampleDescription
+ * @example
+    Click me: <input type="checkbox" name="checked"><br/>
+    Show: <span ng:show="checked">I show up when you checkbox is checked?</span> <br/>
+    Hide: <span ng:hide="checked">I hide when you checkbox is checked?</span>
+ * 
+ * @scenario
+   it('should check ng:show / ng:hide', function(){
+     expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
+     expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
+     
+     input('checked').check();
+     
+     expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
+     expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
+   });
+ */
 angularDirective("ng:hide", function(expression, element){
   return function(element){
     this.$onEval(function(){
@@ -291,6 +835,22 @@ angularDirective("ng:hide", function(expression, element){
   };
 });
 
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:style
+ *
+ * @description
+ * 
+ * @element ANY
+ * @param {expression} expression to eval.
+ *
+ * @exampleDescription
+ * @example
+ * 
+ * @scenario
+   it('should check ng:style', function(){
+   });
+ */
 angularDirective("ng:style", function(expression, element){
   return function(element){
     var resetStyle = getStyle(element);
diff --git a/src/filters.js b/src/filters.js
index 2fec3cd2..2f41d12c 100644
--- a/src/filters.js
+++ b/src/filters.js
@@ -23,8 +23,8 @@
      it('should update', function(){
        input('amount').enter('-1234');
        expect(binding('amount | currency')).toBe('$-1,234.00');
-       expect(element('span[ng\\:bind="amount | currency"]').attr('class')).
-          toMatch(/ng-format-negative/);
+       expect(element('.doc-example-live .ng-binding').attr('className')).
+         toMatch(/ng-format-negative/);
      });
  */
 angularFilter.currency = function(amount){