ngDocs example using ngAnimate

Question

I am generating my API documentation using grunt-ngDocs. I am having trouble using examples that contain animation using ngAnimate. I have included angular-animate script within the scripts option (as required by ngdocs) and I see animations occurring when I navigate through the generated documentation.

Here is my example code

/** 
 * @ngdoc directive
 * (other of ng-doc options)
 *
 * @example
 <example module="exampleAnimationModule"> 
   <file name="index.html">
     <div class="box" my-animation>Click Me</div>
   </file> 

   <file name="styles.css">
     .box {
       border: 1px solid black;
       height: 100px;
       width: 100px;
      }
     .box.red {
       background-color: red;
     }
   </file>

   <file name="script.js">
     angular.module('exampleAnimationModule', ['ngAnimate'])
     .directive('myAnimation', function($animate){
       return {
         link: function(scope, element, attrs, fn) {
           element.on('click', function(){
             scope.$apply(function(){
               $animate.addClass(element, 'red');
             });
          });
         }
       };
     });
   </file>     
 </example>
 */

When I view the documentation, the demo renders correctly but when I click on the box nothing happens. However, when I click on something else in the documentation that starts a $digest cycle, the animation occurs.

It is almost as though the scope.$apply() isn't working properly. It is more interesting that when I click on the 'View in Plnkr' link, everything works as expected.

Answer 1

I have finally found the answer in ngdocs source code. There is an optional animations attribute on the <example> tag that can be set to true. When it is on, it renders a 'Animations On/Off' button on the screen that works properly.

<example module="exampleAnimationModule" animations="true"> 

I cannot find this option anywhere in the documentation. I found it within this regex