Do regions always need to be wrapped?

[markomat]

First: thank you for sharing tractor. it's powerful stuff, i'd say.

I tried it out yesterday and noticed a problem when i followed the example for setting up a layout template. The code of the section "using a layout" didn't work for me. I did only get the content for the main-region and sidebar. Header and footer didn't appear.

So i poked around and tried this and that and suddenly i realised: when i add additional html wrappers to

and

in the layout file, the region gets rendered and the content in the partials showed up.

not working:

<header region="header" id="page-header"> </header>

working:

<div>
  <header region="header" id="page-header"> </header>
</div>

As the main-content and sidebar regions were already wrapped in the example code, there were no problem with these regions.

So, if the regions have to be wrapped, the documentation should be changed. If the reason for this behavior is somewhere else to find, i spotted a bug, i guess. ...I wouldn't be suprised if this is connected to issue #1

My environment is: Windows 8, i used the included grunt server and tested in Firefox.

I recognised the same "need for wrapping" for the content in partials. As long as there is no html-element around the content it's not shown. But in that case i would say it's a feature as it forces us to use proper markup.

[magique]

I also ran into this problem, I don't want to be forced to wrap regions inside a wrapper to output them - I feel like this will start to bloat my code unnecessarily.

To fixed this I added to the function, I don't know how to adjust this code to be a more elegant solution at the moment though

directives.js line 50

    return function(scope, el, attr) {

      var newTemplate;

      // Interact with the $http promise above.
      // This needs to happen in the linking function, since we
      // don't want to start _ANYTHING_ until we get the template back.
      getTemplate.then(function(template) {
        // Wrap template in jqLite...
        newTemplate = angular.element(template.data);
        angular.forEach(newTemplate.find('*'), function(region) {
          // wrap newTemplate.children() in jqLite.
          var _region = angular.element(region);

          // if it's a region element AND we have a "transcluded" HTML fragment,
          // replace HTML.
          if(_region.attr("region") && angular.isDefined(_regions[_region.attr("region")])) {

            _region.html(_regions[_region.attr("region")]);
          }
        });
        // Regions that aren't 
        angular.forEach(newTemplate, function(region) {
          // wrap newTemplate.children() in jqLite.
          var _region = angular.element(region);

          // if it's a region element AND we have a "transcluded" HTML fragment,
          // replace HTML.
          if(_region.attr("region") && angular.isDefined(_regions[_region.attr("region")])) {

            _region.html(_regions[_region.attr("region")]);
          }
        });

        // $compile and append.
        el.append($compile(newTemplate)(scope));
      });
    };

I've tested this including a region without a wrapper and including a region inside multiple wrappers.

[markomat]

@jamiebrightlemon: thanks for the fix. seems to do the trick.