[SOLVED] JQuery Layout with AngularJS

JQuery Layout with AngularJS

I have a simple page in which I am trying to use JQuery Layout plugin. The code is:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>Layout Example</title>
</head>

<body>


    <div class="ui-layout-center">
      Angular test:
      <input type="text" ng-model="name" />{{name}}
    </div>
    <div class="ui-layout-north">North</div>
    <div class="ui-layout-south">South</div>
    <div class="ui-layout-east">East</div>
    <div class="ui-layout-west">West</div>


  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>

  <script type="text/javascript">
    var app = angular.module('app', []);

    app.directive('body', function() {
      return {
        restrict: 'E',
        link: function(scope, elm, attrs) {
          console.log("applying layout");

          elm.layout({
            applyDefaultStyles: true
          });
        }
      };
    });
  </script>

</body>

</html>

Now when I try to wrap the ui-layout-container, nothing appears on the screen. However I can see the full code of the layout in Web developer toolbar. The code is:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>Layout Example</title>
</head>

<body>

  <div class="wrapper">
    <div class="ui-layout-center">
      Angular test:
      <input type="text" ng-model="name" />{{name}}
    </div>
    <div class="ui-layout-north">North</div>
    <div class="ui-layout-south">South</div>
    <div class="ui-layout-east">East</div>
    <div class="ui-layout-west">West</div>
  </div>

  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>

  <script type="text/javascript">
    var app = angular.module('app', []);

    app.directive('wrapper', function() {
      return {
        restrict: 'C',
        link: function(scope, elm, attrs) {
          console.log("applying layout");

          elm.layout({
            applyDefaultStyles: true
          });
        }
      };
    });
  </script>

</body>

</html>

So, it looks like I am unable to pass the class name correctly. What should be passed as class name to make it work? Thanks

EDIT: You can copy and paste the code in Plunker to see the problem.

Solution

You need a height on your wrapper:

<div class="wrapper" style="height:500px;">

I guess it works on <body> because <body> fills the page.