简单的 AngularJS 点击动画 “参数'AppCtrl'不是一个函数，未定义”

Simple AngularJS Click-To-Animate "Argument 'AppCtrl' is not a function, got undefined"

本文关键字：未定义 函数 一个 AppCtrl AngularJS 动画 简单 参数      更新时间：2023-09-26

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

更新：我让它工作了，由于某种原因，html标签中还有另一个ng应用程序。您可以复制下面的代码并立即加载它，如果您复制所有内容，则可以使用动画：

以下是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>
以下是

测试.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

No. 是的。。。但最大的问题是你遵循的教程有问题。你有两次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>

测试.js：

angular.module("app",['ngAnimate'])
.directive('clickFade',function(){
    return function(scope, element) {
            element.bind("click", function() {
                TweenMax.to(element, 1, {opacity: 0});
            })
        }
})

请注意我如何删除jQuery的使用，并且您的单击/淡入淡出函数在错误的元素上。

相关文章：