Пример ngDocs с использованием ngAnimate

Я создаю документацию по API, используя grunt-ngDocs. У меня возникают проблемы с использованием примеров, содержащих анимацию с использованием ngAnimate. Я включил angular-animate script в параметр scripts (как того требует 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», все работает как положено.


javascript angularjs ng-animate
person Joel Jeske    schedule 29.01.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Наконец-то я нашел ответ в исходном коде ngdocs. В теге <example> есть необязательный атрибут анимации, для которого можно установить значение true. Когда он включен, на экране отображается кнопка «Включение/выключение анимации», которая работает правильно.

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

Я не могу найти эту опцию нигде в документации. Я нашел его в этом регулярном выражении

person Joel Jeske    schedule 29.01.2015
comment
Аналогичные ситуации здесь, у меня есть анимации на ng-repeat, и они не работают в документах также после добавления animations="true" в образец. Есть идеи? - person teone; 25.04.2016
comment
Не могли бы вы опубликовать пример использования комментариев и версию ngDocs? - person Joel Jeske; 25.04.2016

arrow_upward
0
arrow_downward

У меня похожая проблема с созданием документации с анимацией для директивы 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>

The full code is here: https://github.com/open-cloud/xos/tree/feature/common-components/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table

Пока для создания документации я использую gulp ng-docs v0.2.13

person teone    schedule 25.04.2016