javascript - 将多个库注入(inject) Angular 时出错

将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
单击调试链接。上面的调试语句应更改颜色

奇怪的是，这似乎与我初始化模块和控制器的方式有关。我同时使用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;
}]);

我花了一些时间才达到隔离这些组件的地步，但现在我很困。有任何想法吗？

最佳答案

ngAnimate或toaster所使用的angular版本似乎都存在不兼容问题。

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

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

更新：我写完这篇文章后意识到，使用的ngAnimate比角核要低得多。

DEMO