使用 ngAnimate 的 ngDocs 示例

Question

我正在使用 grunt-ngDocs 生成我的 API 文档。我在使用包含使用 ngAnimate 的动画的示例时遇到问题。我在脚本选项中包含了 angular-animate 脚本（根据 ngdocs 的要求），当我浏览生成的文档时，我看到了动画。

这是我的示例代码

/** 
 * @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>
 */

当我查看文档时，演示正确呈现，但是当我单击该框时没有任何反应。但是，当我单击启动 $digest 循环的文档中的其他内容时，会出现动画。

好像 scope.$apply() 没有正常工作。更有趣的是，当我单击 'View in Plnkr' link 时，一切都按预期进行。

Answer 1

终于在ngdocs源码中找到了答案。 <example> 标签上有一个可选的动画属性，可以设置为 true。当它打开时，它会在屏幕上呈现一个正常工作的 'Animations On/Off' 按钮。

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

我在文档中的任何地方都找不到这个选项。我在 this regex

中找到了它

Answer 2

我在为 ng-repeat 指令生成带有动画的文档时遇到了类似的问题。

这里是 ng-doc 示例代码：

<example module="sampleTable2" animations="true">
<file name="index.html">
  <div ng-controller="SampleCtrl2 as vm">
    <xos-table data="vm.data" config="vm.config"></xos-table>
  </div>
</file>
<file name="script.js">
  angular.module('sampleTable2', ['xos.uiComponents', 'ngAnimate'])
  .controller('SampleCtrl2', function(){
    this.config = {
      columns: [
        {
          label: 'First Name', // column title
          prop: 'name' // property to read in the data array
        },
        {
          label: 'Last Name',
          prop: 'lastname'
        }
      ],
      classes: 'table table-striped table-condensed', // table classes, default to `table table-striped table-bordered`
      actions: [ // if defined add an action column
        {
          label: 'delete', // label
          icon: 'remove', // icons, refers to bootstraps glyphicon
          cb: (user) => { // callback, get feeded with the full object
            console.log(user);
          },
          color: 'red' // icon color
        }
      ],
      filter: 'field', // can be by `field` or `fulltext`
      order: true
    };

    this.data = [
      {
        name: 'John',
        lastname: 'Doe'
      },
      {
        name: 'Gili',
        lastname: 'Fereydoun'
      }
    ]
  });
</file>

完整代码在这里：https://github.com/open-cloud/xos/tree/feature/common-components/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table

在生成文档时我正在使用 gulp ng-docs v0.2.13

使用 ngAnimate 的 ngDocs 示例

ngDocs example using ngAnimate

javascript

angularjs

ng-animate