I'm creating a directive that renders a list of content from a method passed in via an attribute. In addition to passing a method to get the data from, it accepts two attributes to set a class on the ul and li elements rendered in the list. When I set the class on the li element, it works fine. When I try to set a class on the ul, chaos ensues: the ng-repeat no longer works as expected and it throws an exception "undefined is not a function"
Here's a simplified version of the directive that has the issue.
var myApp = angular.module('myApp',[]).
directive('contentList',function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
method:'&',
ulclass: '@',
liclass: '@'
},
template: '<div class="content-list-wrapper"> ' +
'<div class="content-loader" ng-show="loading"><i>Loading...</i></div>' +
'<ul class="content-list {{ulclass}}">' +
'<li class="content-list-repeat {{liclass}}" ng-repeat="item in items" ng-transclude></li>' +
'</ul>' +
'</div>',
link: function(scope,iElement,iAttrs){
scope.items = scope.method();
}
} ;
});
If you remove {{ulclass}} in the class attribute of the ul element, everything works. I'm baffled why it works for the li, but not the ul.
I've setup a jsfiddle at http://jsfiddle.net/woogychuck/wqU63/