angularjs - AngularJS アニメーションを機能させようとしている

Question

2 つのフォームのアニメーションの例があります。最初のフォームは非表示で、ボタンをクリックするともう 1 つのフォームが表示されます (キャンセルをクリックすると反転します)。http://plnkr.co/edit/asJ9u7MwRwMECpGaX3uz?p=previewを参照してください。

これの AngularJS バージョンを作りたいです。この件に関するジョン・リンドクイストのチュートリアルに適応しようとしています: http://egghead.io/lessons/angularjs-animating-the-angular-way

しかし今、私は立ち往生しています。2 番目のフォームを最初に非表示にする方法と、(適切な Angular の方法で) jQuery のみの例のように動作させる方法を教えてください。

http://plnkr.co/edit/Z4UYp1m3moVlarzbBNnO?p=previewでわかるように、コードには次の html があります。

<h1>Testing animation with AngularJS</h1>
<div ng-controller="MainCtrl as main" xmlns="http://www.w3.org/1999/html">
  <form ff-toggle-animation="!main.showNewUserForm" role="form">
    <input type="text" id="search" ng-model="main.username" size="30" placeholder="New username here">
    <button type="submit" class="btn btn-primary" ng-click="main.showNewUserForm=true">Add</button>
  </form>
  <form ff-toggle-animation="main.showNewUserForm">
    Username:  <input type="text" id="add" ng-model="main.username" size="30" placeholder="New username here"><br>
    Full name:  <input type="text" ng-model="main.name" size="30" placeholder="Add new user full name here"><br>
    Description: <textarea id="description" rows="2" ng-model="main.description" placeholder="Add user description here"></textarea>
    <button type="submit" ng-click="main.save()">Save</button>
    <button type="submit" ng-click="main.showNewUserForm=false">Cancel</button>
  </form>
</div>

そして、これは私がこれまでに持っているスクリプトです:

var app = angular.module('testApp', ['ngAnimate']);

app.controller('MainCtrl', function () {
  this.users = {};
  this.showNewUserForm = false;
  this.save = function() {
    // some code to save a new user
  }
});

app.directive("ffToggleAnimation", function ($animate) {
  return function (scope, element, attrs) {
    scope.$watch(attrs.ffToggleAnimation, function(newVal) {
      if(newVal) {
        $animate.addClass(element, "show");
      } else {
        $animate.removeClass(element, "show");
      }
    });
  }
});

app.animation(".show", function() {
  return {
    addClass: function(element, className) {
      $(element).toggle(400);
    },
    removeClass: function(element, className) {
      $(element).toggle(400);
    }
  };
});

最初のフォームを拡張する代わりに 2 つのフォームが必要な理由がありますが、この例ではその理由を伝えていません。