如何动态使用ng-animate

Question

我有两个简单的容器，第一个包含一个指令，当我点击它时，指令将触发函数，在该函数中，我想动态添加和删除其他contianer上的ng-animate，这些常量应该在条件下变为活动和非活动

<div class="form-group">
         <div>
            <yesno-button class="radioField" show-hide ng-click="showChildFields(ev)"></yesno-button>
            <label class="radio-inline control-label">1st Container</label>
        </div>
</div>
<div class="form-group" style="display:none;">
        <div>
            <yesno-button class="radioField"></yesno-button>
            <label class="radio-inline control-label">2nd Container</label>
        </div>
</div>   

我有一个show-hide指令定义

module.directive("showHide", function () {

    return {


        link: function (scope, element, attrs, controller) {

            scope.showChildFields = function (ev) {
                    //need to enable and disbale 2nd container with ng-animation
            };
        }
    };
});

Answer 1

使用ng-show可以达到预期的效果。在单击第一个yesno-button时设置一个布尔变量。然后，当该变量为真时，使用ng-show显示第二个容器。

<div class="form-group">
  <div>
    <input type="button" ng-click="container.showChildren = !container.showChildren" value="Yes/No"/>
    <label class="radio-inline control-label">
      1st Container
    </label>
  </div>
</div>
<div class="form-group animate-show" ng-show="container.showChildren">
  <div>
    <input type="button" value="Yes/No"/>
    <label class="radio-inline control-label">
      2nd Container
    </label>
  </div>
</div> 

请注意，第二个容器具有类animate-show，因此将应用动画。

下面是一个演示，改编自ng-show应用编程接口文档：http://plnkr.co/WdQ4Y1ARxsWkUhEf7pA1