0

我正在尝试将jQuery Layout 插件合并到我的 AngularJS 项目中。

我有一个工作版本，我只使用 jQuery、jQuery-UI 和 jQuery 布局插件在这里构建

现在我想在 AngularJS 中有同样的东西。

我特别难以将默认值传递给插件的嵌套实例。

一个简单的例子是这样工作的：

HTML：

<body ng-app="myApp">
    <div id="outer-container" layout-container>
        <div class="ui-layout-west pane">WEST</div>
        <div class="ui-layout-center pane">MIDDLE</div>
        <div class="ui-layout-east pane">EAST</div>
    </div>
</body>

JavaScript：

var app = angular.module('myApp', []);

app.directive('layoutContainer', function() {
    return {
        scope: {},
        link: function (scope, element, attrs) {
                var layout = element.layout({
                    west: {
                      resizable : true,
                      initClosed : false,
                      livePaneResizing: true,
                      size: 150
                    },
                    east: {
                      resizable : true,
                      initClosed : false,
                      livePaneResizing: true,
                      size: 150
                    }
                });
        }
    }
});

jsFiddle

但是，当我这样做时，我尝试复制的示例不起作用：

HTML：

<body ng-app="myApp">
    <div id="outer-container" layout-container>
        <div class="ui-layout-west pane">WEST</div>
        <div class="ui-layout-center pane">
            <div id="middle-container" layout-middle>
                <div class="ui-layout-north pane top-panel">
                    <div id="top-container" layout-top>
                        <div class="ui-layout-center pane">TOP LEFT</div>
                        <div class="ui-layout-east pane">TOP RIGHT</div>
                    </div>
                </div>
                <div class="ui-layout-center pane bottom-panel">
                    <div id="bottom-container" layout-bottom>
                        <div class="ui-layout-center pane">BOTTOM LEFT</div>
                        <div class="ui-layout-east pane">BOTTOM RIGHT</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-layout-east pane">EAST</div>
    </div>
</body>

JavaScript：

var app = angular.module('myApp', []);

app.directive('layoutContainer', function() {
    return {
        scope: {},
        link: function (scope, element, attrs) {
                var layout = element.layout({
                    west: {
                      resizable : true,
                      initClosed : true,
                      livePaneResizing: true,
                      size: 350
                    },
                    east: {
                      resizable : true,
                      initClosed : true,
                      livePaneResizing: true,
                      size: 350
                    }
                });
        }
    }
});

app.directive('layoutMiddle', function() {
    return {
        scope: {},
        link: function (scope, element, attrs) {
                var layout = element.layout({
                    north: {
                          size: .5,
                          livePaneResizing: true
                        }
                });
        }
    }
});

app.directive('layoutTop', function() {
    return {
        link: function (scope, element, attrs) {
            angular.element(element).layout({
                east: {
                      size: .5,
                      livePaneResizing: true
                    }
            });
        }
    };
});

app.directive('layoutBottom', function() {
    return {
        link: function (scope, element, attrs) {
            angular.element(element).layout({
                east: {
                      size: .5
                    }
            });

        }
    };
});

jsFiddle

我的目标是让 panel TOP LEFT、TOP RIGHT和默认情况BOTTOM LEFT下BOTTOM RIGHT平均占用所有空间。

编辑：问题在于指令是异步编译的。AngularJS顺序编译指令的正确方法是什么[在这种情况下，layoutContainer必须是第一个，然后是layoutMiddle，然后是剩下的layoutTop和layoutBottom]？

4

1 回答 1

0

Angular 的指令编译和链接是顺序的，但它的顺序与您假设的相反。元素在其后代之前编译，并在其祖先之前链接。

解决此问题的一种方法是在轮到容器期间构建延迟操作堆栈link()，然后按 lifo 顺序清空此堆栈。

看看你的小提琴的这个分支，以获得演示和一个可能的解决方案。颠倒调用顺序的区别element.layout()如下：

  1. 创建了一个名为的服务，该服务lifoRunner具有一个push()用于构建函数堆栈的方法和一个runStack()弹出堆栈并运行每个方法直到堆栈为空的方法。
  2. lifoRunner作为每个指令的依赖注入。
  3. 将每个链接函数的主体迁移到新函数。现在，每个方法都不再执行以前的代码，而是link()将其新的封装函数传递给lifoRunner.push().
  4. 最后一个链接指令 layoutContainerlifoRunner.runStack()在它调用之后立即另外调用lifoRunner.push()。其他三个指令链接方法只调用lifoRunner.push().

为了进一步说明这一点，我还在每个指令的相同相对位置添加了两个调用console.log()。

  • 在 link() 的主体中和调用之前lifoRunner.push()，我log("Link <DirectiveName>").
  • lifoRunner.push()在传递给I的函数的第一行log("Stack <DirectiveName>")。

加载 Fiddle 时，您会看到单元格的大小现在符合您的预期，并且您会在控制台中找到以下内容以建立评估顺序：

Link Top
Link Bottom
Link Middle
Link Container
Stack Container
Stack Middle
Stack Bottom
Stack Top

干杯!

于 2014-03-05T15:29:42.977 回答