Multiple ng class attributes in directive
Q script.js
I have a directive super
. This directive has a pattern
template: '<div class="super" ng-class="{dirClass: foo}"></div>'
with the attribute ng-class
.
Note that the directive also has replace: true
.
The element <super>
that invokes this directive in index.html
has an attribute ng-class
. Apparently Angular doesn't like this. He will try to make out
[{viewClass: !bar} {dirClass: foo}]
which obviously fails. I expected it to be merged automatically. Not.
I think what I am trying to achieve is clear, but how would I go about it?
source to share
you can do it like this: http://plnkr.co/edit/xEc0pRHVbVLgR0NhWPEI?p=preview
JS:
angular.module('app', [])
.controller('myCtrl', function ($scope, $interval) {
$scope.bar = false;
$interval(function () {
$scope.bar = !$scope.bar;
}, 500);
})
.directive('super', function () {
return {
restrict: 'EA',
template: '<div class="super" ng-class="{dirClass: foo , viewClass: !foo}" ></div>',
scope: {
foo: '='
},
replace: true
};
});
HTML:
<super foo="bar"></super>
source to share