Template for directive 'zfAsButton' must have exactly one root element

Question

I have a foundation app in meteor with angularjs. I used the zf-as-button directive, but it says error

Template for directive 'zfAsButton' must have exactly one root element

I came to find out that the issue is resolvable by enclosing the directive template into a div or span OR by removing the replace: true, but I cannot do this for the foundation package as it is included in gitignore and won't work in other cases. Has anyone else had this issue? Any help would be appreciated

Thankyou

Answer 1

I haven't used foundation app but, according to the project source code, that problem should not be happening using foundation's templates.

You can see that zfAsButton directive is using components/actionsheet/actionsheet-button.htm template (https://github.com/zurb/foundation-apps/blob/master/dist/js/foundation-apps.js#L1208)

If you look at the template in https://github.com/zurb/foundation-apps/blob/master/dist/js/foundation-apps-templates.js#L18 you'll see that the template has one root element, as expected when a directive has replace:true in its definition.

Review which template is the one being loaded, as it doesn't look like the one I referenced before.