简单的 AngularJS Click-To-Animate “参数‘AppCtrl’不是函数，未定义”答案

【问题标题】：Simple AngularJS Click-To-Animate "Argument 'AppCtrl' is not a function, got undefined"简单的 AngularJS Click-To-Animate “参数‘AppCtrl’不是函数，未定义”
【发布时间】：2014-04-01 22:12:59
【问题描述】：

我试图弄清楚如何编写一个非常基本的 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

【问题讨论】：

您很好地解释了您的问题并展示了代码，更进一步，如果您在 plnkr.co 工作的同时学习技巧，这样您就可以与其他人分享实时样本可以编辑以使您得到正确的答案。

标签： javascript angularjs

【解决方案1】：

没有。嗯，是的......但最大的问题是你正在遵循一个错误的教程。你有两次ng-app...一次嵌套。它在元素的角度函数内有 jquery 选择器......甚至没有加载 jquery。

而且您使用的是相当旧版本的引导程序（相对而言）。

有 2 个比在补间函数中使用 jquery 更好的选择...首先，您可以通过将其作为参数传递给 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 的，而且您的点击/淡入淡出功能位于错误的元素上。

【讨论】：

啊真的没有注意到 jQuery...我还看到 TweenMax 需要它自己的库
您很可能收到AppCtrl is not defined，因为$ 未定义。
啊不错的解决方案我还发布了一个只使用内置指令plnkr.co/edit/WU6y8ka0udXHzZvCeZPc
非常感谢 shaunhusain！这是一个完美的例子。
没问题，我实际上只是重新保存了它并删除了 ngAnimate 依赖项，只是为了明确说明这对于这种情况来说不是必需的。如果您包含 ng-animate 某些指令（ng-view、ng-show/hide 等），将触发一系列要添加和删除的类，如果需要，您可以使用这些类对动画进行更精细的控制。 docs.angularjs.org/api/ngAnimate/service/$animate