使用自定义属性和模板创建角度指令

Question

i'm having some problems with a custom directive to display some images instead of a dropdown. but by now i'm stuck with displaying the correct html from my template function. Writing the image path directly into my template generates attributes for every part between slashes. Eg:

'src="/path/to/image.jpg"'

is changed to

src=" path"="" to="" "image.jpg"=""

i even tried to puth those paths in my model but this is the result: https://plnkr.co/edit/EGm5nk?p=preview

i found a working example but cannot find the difference: http://plnkr.co/edit/nQbrSi?p=info

my additional question to this: how do i address a list correctly in my directive?

EDIT: That error was so stupid and easy to oversee

Answer 1

You just missed to close the class inside directive. Change

var html = '<div class="foobar">'+
'                    <div class="row"> '+
'                        <div class="col-xs-3 ng-repeat="'+ attrs.ttOptions + '"><img ng-src="{{item.path}}" /></div> '+
'                    </div> '+
'                </div>';
            return html;

to

.....<div class="col-xs-3" ng-repeat="'+ attrs.ttOptions .....