foundation-apps
foundation-apps copied to clipboard
zurb
Template for directive 'zfOffcanvas' must have exactly one root element.
Similarly to issue #377, I'm getting the following error:
Error: [$compile:tplrt] Template for directive 'zfOffcanvas' must have exactly one root element. components/offcanvas/offcanvas.html
This is on a fresh installation of the newest version of Foundation for Apps. I haven't updated the default components/offcanvas/offcanvas.html, and the error persists even if I use only the following to call it:
<zf-offcanvas position="left" id="menu"></zf-offcanvas>
I'd guess it has to do with the HTML to JS gulp process using ngHtml2js, but I'm not certain.
That error happens when the template specified for directive does not have
a single root and the deprecated replace: true option is used.
On Thu, Mar 19, 2015 at 10:42 PM Geoff Kimball [email protected] wrote:
Can you try using the directive as an attribute instead of an element?
— Reply to this email directly or view it on GitHub https://github.com/zurb/foundation-apps/issues/542#issuecomment-83755197 .
@gakimball yes, using <div zf-offcanvas position="left" id="menu"></div> shows the same error.
@circlingthesun Right, that's where I'm guessing ngHtml2js is mis-formatting the built-in offcanvas.html, which is this:
<div class="off-canvas {{ position }}" ng-class="{'is-active': active}" ng-transclude></div>
Well, there is an quick way to find out. Inject $templateCache and then run console.log($templateCache.get('components/offcanvas/offcanvas.html'))
@circlingthesun Inject into the run() function?
function run($templateCache) {
FastClick.attach(document.body);
console.log($templateCache.get('components/offcanvas/offcanvas.html'));
}
This results in Uncaught Error: [$injector:unpr] Unknown provider: tProvider <- t, which also seems to be a product of minification - I don't know of an alternate format for injecting ng variables in functions. Trying to inject $templateCache into controllers or config.$inject & use it results in ReferenceError: $templateCache is not defined
Side note: would something like ng-annotate in the build process improve this situation?
Yeah, ng-nnotate would fix it. But you could also do what is suggested under the 'A Note on Minification' section at https://docs.angularjs.org/tutorial/step_05
Hmm, well I did that here:
config.$inject = ['$urlRouterProvider', '$locationProvider', '$templateCache'];
function config($urlProvider, $locationProvider, $templateCache) {
console.log($templateCache.get('components/offcanvas/offcanvas.html'));
...
});
and got Unknown provider: $templateCache. Is $templateCache built-in or do I need to add a module?
You can only inject providers in the config function. Inject it to a controller or run function.
This error is still persisting in the most up-to-date version of Foundation for Apps. The undefined console.log message means that the built-in template for zfOffcanvas is not being loaded into the app correctly, right?
This might not be related, but there aren't many foundation-app specific resources on this topic.
I was having a similar problem with all the components, turns out I was missing a link to the compiled templates.js file.
<script src="/assets/js/templates.js"></script>
@spsaucier Are you still getting this issue after including the templates.js file in your index.html file?
Including the templates.js file in index.html got rid of the error for me.
+1 Template for directive 'zfPanel' must have exactly one root element.
I didn't compile the templates.js file because I bootstrapped the app and compiled with Grunt, but even including the foundation-apps-templates.js and foundation-apps.js didn't fix anything.
If you encounter this problem, make sure you have a correct order of foundation scripts on your page:
<script type="text/javascript" src="path/to/foundations/apps/dist/js/foundation-apps.js"></script>
<script type="text/javascript" src="path/to/foundations/apps/js/angular/foundation.js"></script>
<script type="text/javascript" src="path/to/foundations/apps/js/angular/foundation-apps-templates.js"></script>
inside your directive's templateUrl you should use <div></div> instead of something like this
<p>...</p>
<div>...</div>
<div</div>
just this... :)
