使用 AngularJS 的 JQuery 布局答案

【问题标题】：JQuery Layout with AngularJS使用 AngularJS 的 JQuery 布局
【发布时间】：2014-02-28 01:33:02
【问题描述】：

我有一个简单的页面，我在其中尝试使用 JQuery Layout 插件。代码是：

<!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>

现在，当我尝试包装 ui-layout-container 时，屏幕上没有显示任何内容。但是，我可以在 Web 开发人员工具栏中看到布局的完整代码。代码是：

<!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>

所以，看起来我无法正确传递类名。应该将什么作为类名传递以使其工作？谢谢

编辑：您可以将代码复制并粘贴到 Plunker 中以查看问题。

【问题讨论】：

标签： jquery angularjs angularjs-directive jquery-layout

【解决方案1】：

您的包装器上需要height：

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

我猜它适用于<body>，因为<body> 填满了页面。

【讨论】：

【解决方案2】：

不熟悉 JS-Layout，但它看起来不喜欢包装 div（或任何其他包装元素）。

这可能不是您正在寻找的答案，但您可以将类设置为正文，它会起作用。

http://plnkr.co/edit/l0ddGBcSZwTO18Q9RvBC

【讨论】：