angularjs - 加载期间出现 Angular 动画错误

Question

我正在开发这个有 Angular 的简单页面。我正在使用 Bower 安装我需要的组件，并且该应用程序曾经完美运行。直到我决定利用 Angular 动画库。我第一次使用 Bower，它问我应该使用哪个“合适的”Angular 库:1.2.6(已经安装并运行)或 1.2.14。

所以，如果我选择 1.2.6，添加后就会出现错误

var mainApp = angular.module('myStopApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngAnimate',
  'myStopModule'
])

是

Uncaught Error: [$injector:unpr] Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile

如果我选择其他版本，问题就会转移到代码上，代码似乎无法识别 ng-class 的使用。

我有一个带有 ng-class="testClass"的元素和一个列表元素，其中我有:

ng-click="selectStop(stop); testClass='stop-active'"

我在animations.css中的位置:

.stop-active-add, .stop-active-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.stop-active-add.add-active,
.stop-active-remove {
  opacity:0;
}

.stop-active-add,
.stop-active-remove.-remove-active {
  opacity:1;
}

加载页面时出现错误:

[$parse:syntax] Syntax Error: Token '=' implies assignment but [selectStop(stop); testClass] can not be assigned to...

看来第一个功能和使用 Angular 的 css hook 不能在同一个 ng-click 中同时使用。

我可以为这两个问题中的至少一个找到解决方案吗:)？..

Answer 1

Angular 似乎已经改变了它们允许您在点击处理程序的表达式中执行的操作。为什么不直接将赋值语句放在您已经在点击处理程序中调用的函数中呢？

ng-click="selectStop(stop)"

然后在 selectStop() 函数中:

$scope.selectStop = function(arg) {
    testClass = 'stop-active';
    ...
}