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:
<!-- language: lang-html --><div ng-class="{'red': showDebug}" >{{showDebug}}</div>
<div ng-class="{'blue': !showDebug}" >{{showDebug}}</div>
I get the following error message:
<!-- language: lang-none -->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
<sup>Click on the Debug link. The debug statements above it should change color</sup>
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:
<!-- language: lang-js -->var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.showDebug = true;
});
This doesn't work:
<!-- language: lang-js -->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:
<!-- language: lang-js -->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?