Question

我正在使用grunt-ngDocs生成我的API文档。我无法使用包含动画的示例使用ngAnimate。我在scripts选项中包含了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()无法正常工作。更有意思的是，当我点击Plnkr＆＃39;中的视图时链接，一切都按预期工作。

Answer 1

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

<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示例

2 个答案: