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 api文档：http://plnkr.co/WdQ4Y1ARxsWkUhEf7pA1

如何动态使用ng-animate

1 个答案: