Question

在将ng-class与任何三元运算符一起使用时，我遇到了一个奇怪的冲突：

<div ng-class="{'red': showDebug, 'blue': !showDebug}" >{{showDebug}}</div>
<div ng-class="showDebug ? 'red' : 'blue'" >{{showDebug}}</div>

虽然这两种方法都可以自行完成：

<div ng-class="{'red': showDebug}" >{{showDebug}}</div>
<div ng-class="{'blue': !showDebug}" >{{showDebug}}</div>

我收到以下错误消息：

TypeError: undefined is not a function
at updateClasses (https://code.angularjs.org/1.2.20/angular.js:18307:22)
at Object.ngClassWatchAction [as fn] (https://code.angularjs.org/1.2.20/angular.js:18318:15)
at Scope.$get.Scope.$digest (https://code.angularjs.org/1.2.20/angular.js:12447:29)
at Scope.$get.Scope.$apply (https://code.angularjs.org/1.2.20/angular.js:12712:24)
at HTMLAnchorElement.<anonymous> (https://code.angularjs.org/1.2.20/angular.js:18980:21)
at https://code.angularjs.org/1.2.20/angular.js:2823:10
at Array.forEach (native)
at forEach (https://code.angularjs.org/1.2.20/angular.js:325:11)
at HTMLAnchorElement.eventHandler (https://code.angularjs.org/1.2.20/angular.js:2822:5) angular.js:9997

Demo in Plunker
^{单击Debug链接。它上面的调试语句应该改变颜色}

奇怪的是，这似乎与我初始化模块和控制器的方式有关。我正在使用ui.bootstrap和toaster

这样可以，但不会带来烤面包机：

var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
  $scope.showDebug = true;
});

这不起作用：

var app = angular.module('plunker', ['ui.bootstrap', 'toaster']);
app.controller('MainCtrl', function($scope, toaster) {
  $scope.showDebug = true;
});

我也尝试将烤面包机直接注入控制器本身，但仍无法解决任何冲突：

var app = angular.module('plunker', ['ui.bootstrap', 'toaster']);
app.controller('MainCtrl', ['$scope', 'toaster', function($scope, toaster) {
  $scope.showDebug = true;
}]);

我花了一段时间甚至达到了我已经隔离掉这些组件的程度，但现在我已经陷入了困境。有什么想法吗？

Answer 1

使用ngAnimate或toaster与您正在使用的角度版本似乎存在不兼容问题。

如果您将角度回滚到版本1.2.12，则错误消失。

我会检查两者的更多当前版本，或检查烤面包机的github问题跟踪器

更新：在我写完之后意识到使用的ngAnimate版本比角度核心低得多。

的 DEMO

Answer 2

如果您使用Firefox开发人员工具栏，则可以看到实际错误：

Error: $animate.setClass is not a function
updateClasses@https://code.angularjs.org/1.2.20/angular.js:18307:13
ngClassWatchAction@https://code.angularjs.org/1.2.20/angular.js:18318:15
$RootScopeProvider/this.$get</Scope.prototype.$digest@https://code.angularjs.org/1.2.20/angular.js:12447:23
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://code.angularjs.org/1.2.20/angular.js:12712:13
ngEventHandler/<@https://code.angularjs.org/1.2.20/angular.js:18980:15
createEventHandler/eventHandler/<@https://code.angularjs.org/1.2.20/angular.js:2823:7
forEach@https://code.angularjs.org/1.2.20/angular.js:325:7
createEventHandler/eventHandler@https://code.angularjs.org/1.2.20/angular.js:2822:5

$animate和toaster是一个问题。一个简单的解决方法是使用ngAnimate更新1.2.20版本与Angular版本对齐。

<script src="http://code.angularjs.org/1.2.20/angular-animate.min.js" ></script>

将多个库注入Angular时出错

2 个答案: