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.
2 answers
solution1
1 ACCPTED 2014-02-28 03:52:42
You need a height on your wrapper:
<div class="wrapper" style="height:500px;">
I guess it works on <body> because <body> fills the page.
solution2
0 2014-02-28 03:52:35
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.