Question

我正在试图弄清楚如何编写一个非常基本的AngularJS应用程序，当点击一个按钮时执行动画，我无法弄清楚为什么它无法正常工作我逐字复制了一个教程而无法弄清楚为什么教程是错误的。

更新：我让它运转了，出于某种原因，html标签中还有另一个ng-app。您可以复制下面的代码并立即加载它并在复制所有内容时使用动画：

这是animatetest.html的样子：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Top Animation</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

</head>

<body ng-app="app" ng-controller="AppCtrl as app">

    <button id="my-button" class="btn-primary" ng-click="app.fadeIt()">Click to fade</button>
    <div id="my-badge" class="badge" hide-me="app.isHidden">Fade me</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script>
<script src="test.js"></script>
</body>
</html>

这就是test.js的样子：

var app = angular.module（“app”，[“ngAnimate”]）;

app.controller("AppCtrl", function () {
  this.isHidden = false;
  this.fadeIt = function () {
    this.isHidden = !this.isHidden;
  }
});

app.directive("hideMe", function () {
  return function (scope, element, attrs) {
    scope.$watch(attrs.hideMe, function (newVal) {
      if (newVal) {
        TweenMax.to(element, 1, {opacity: 0});
      }
    })
  }
});

更新2：这是一个示例的plunker，它比上面的示例好10倍，因为它不需要第三方TweenMax库来执行实际的动画：

http://plnkr.co/edit/WU6y8ka0udXHzZvCeZPc

Answer 1

没有。是的...但最大的问题是你正在遵循一个有缺陷的教程。你有ng-app两次......一旦嵌套了。它在一个元素的角函数中有jquery选择器......并且jquery甚至没有被加载。

你正在使用一个相当旧版本的bootstrap（相对而言）。

在补间函数中使用jquery有2个更好的选项...首先，您可以通过将其作为fadeIt函数中的参数传递来准确指定哪个元素，或者更好的是，通过自定义处理此元素使用隔离范围的指令。

<!doctype html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>Top Animation</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

    </head>

    <body ng-controller="AppCtrl as testApp">

      <div id="my-button" class="btn btn-primary" click-fade>Fade me</div>



    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
    <script src="test.js"></script>
    </body>
    </html>

test.js：

angular.module("app",['ngAnimate'])

.directive('clickFade',function(){

    return function(scope, element) {
            element.bind("click", function() {
                TweenMax.to(element, 1, {opacity: 0});
            })
        }

})

注意我是如何删除jQuery的使用的，而且你点击/淡入的功能也是错误的元素。

简单的AngularJS Click-To-Animate“Argument'AppCtrl'不是函数，未定义”

1 个答案: