Reputation: 30107
I'm getting a weird conflict when using ng-class
with either of the ternary operators:
<div ng-class="{'red': showDebug, 'blue': !showDebug}" >{{showDebug}}</div>
<div ng-class="showDebug ? 'red' : 'blue'" >{{showDebug}}</div>
Whereas both of these work fine on their own:
<div ng-class="{'red': showDebug}" >{{showDebug}}</div>
<div ng-class="{'blue': !showDebug}" >{{showDebug}}</div>
I get the following error message:
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
Click on the Debug link. The debug statements above it should change color
Oddly, this appears related to how I've initialized my module and controller. I'm using both ui.bootstrap and toaster
This will work, but won't bring in toaster:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.showDebug = true;
});
This doesn't work:
var app = angular.module('plunker', ['ui.bootstrap', 'toaster']);
app.controller('MainCtrl', function($scope, toaster) {
$scope.showDebug = true;
});
I've also tried to inject toaster straight into the controller itself, but still doesn't resolve any conflicts:
var app = angular.module('plunker', ['ui.bootstrap', 'toaster']);
app.controller('MainCtrl', ['$scope', 'toaster', function($scope, toaster) {
$scope.showDebug = true;
}]);
It took me a while to even get to the point where I've isolated down these components, but now I'm pretty stuck. Any ideas?
Upvotes: 0
Views: 525
Reputation: 171690
There seems to be an incompatibility problem either with ngAnimate
or toaster
with version of angular you are using.
If you rollback angular to version 1.2.12
the errors disappear.
I would check for more current versions of both, or check github issue tracker for toaster
Update: realized after I wrote this that ngAnimate
being used is a much lower version than angular core.
Upvotes: 2
Reputation: 3395
If you use Firefox developer toolbar, you can see the actual error:
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
So it's an issue with $animate
and toaster
. A simple fix is to update the ngAnimate
version align with Angular version, using 1.2.20
for both.
<script src="http://code.angularjs.org/1.2.20/angular-animate.min.js" ></script>
Upvotes: 2