0

我有一个 2 种形式的动画示例，其中第一种被隐藏，另一种在单击按钮时显示（单击取消时反转）。见http://plnkr.co/edit/asJ9u7MwRwMECpGaX3uz?p=preview

我想制作一个 AngularJS 版本。我正在尝试适应有关该主题的 John Lindquist 教程：http: //egghead.io/lessons/angularjs-animating-the-angular-way

但现在我被困住了。我怎样才能使第二种形式最初隐藏，我怎样才能使它像 jQuery 唯一的例子一样（以正确的 Angular 方式）？

正如您在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 个表单而不是扩展第一个表单是有原因的，但是这个例子没有传达这个原因。

4

0 回答 0