JQuery Layout with AngularJS

Question

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.

score 1 · Accepted Answer · answered Feb 28 '14 at 03:52

1

You need a height on your wrapper:

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

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

answered Feb 28 '14 at 03:52

Sylvain

19,099
23
96
145

score 0 · Answer 2 · answered Feb 28 '14 at 03:52

0

Not familiar with JS-Layout but it looks like it doesn't like wrapper div (or anyother wrapping element).

This may not be the answer you are looking for but you can set the class to the body and it will work.

http://plnkr.co/edit/l0ddGBcSZwTO18Q9RvBC

answered Feb 28 '14 at 03:52

Chi Row

1,106
7
18

JQuery Layout with AngularJS

2 Answers2