如何正确使用jQuery布局插件和AngularJS使嵌套指令工作？

我正试图将其纳入我的AngularJS项目中

我有一个只使用jQuery、jQuery UI和jQuery布局插件构建的工作版本

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

我在将默认值传递给插件的嵌套实例时遇到了特别的麻烦

下面是一个简单的例子：

HTML:

西部
中间的
东边

JavaScript:

var-app=angular.module（'myApp'，[]）；
app.directive（'layoutContainer'，function（）{
返回{
作用域：{}，
链接：函数（范围、元素、属性）{
var layout=element.layout({
西：{
可调整大小：正确，
我的回答是：错，
livePaneResizing：是的，
尺码：150
},
东部：{
可调整大小：正确，
我的回答是：错，
livePaneResizing：是的，
尺码：150
}
});
}
}
});

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

HTML:

西部
左上角
右上角
左下角
右下角
东边

JavaScript:

var-app=angular.module（'myApp'，[]）；
app.directive（'layoutContainer'，function（）{
返回{
作用域：{}，
链接：函数（范围、元素、属性）{
var layout=element.layout({
西：{
可调整大小：正确，
对,，
livePaneResizing：是的，
尺码：350
},
东部：{
可调整大小：正确，
对,，
livePaneResizing：是的，
尺码：350
}
});
}
}
});
app.directive（'layoutmidle'，function（）{
返回{
作用域：{}，
链接：函数（范围、元素、属性）{
var layout=element.layout({
北：{
尺寸：.5，
livePaneResizing：正确
}
});
}
}
});
app.directive（'layoutTop'，function（）{
返回{
链接：函数（范围、元素、属性）{
角度。元素（元素）。布局({
东部：{
尺寸：.5，
livePaneResizing：正确
}
});
}
};
});
app.directive（'layoutbooth'，function（）{
返回{
链接：函数（范围、元素、属性）{
角度。元素（元素）。布局({
东部：{
尺寸：.5
}
});
}
};
});

我的目标是使面板

左上

，

右上

，

左下

和

右下

默认情况下平均占用所有空间

---

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

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

解决此问题的一种方法是在

link（）

期间构建一个延迟操作堆栈，然后在容器轮到它时按后进先出顺序清空此堆栈

请看一个演示和一个可能的解决方案。与

element.layout（）

调用顺序相反的区别如下：

创建了一个名为

lifoRunner

的服务，该服务具有用于构建函数堆栈的

push（）

方法和一个

runStack（）

方法，该方法弹出堆栈并运行每个方法，直到堆栈为空

作为每个指令的依赖项注入

lifoRunner

将每个链接函数的主体迁移到新函数。每个

link（）

方法不再执行以前的代码，而是将其新的封装函数传递给

lifoRunner.push（）

链接的最后一个指令layoutContainer在调用

lifoRunner.push（）

之后立即额外调用

lifoRunner.runStack（）

。其他三种指令链接方法只调用

lifoRunner.push（）

为了进一步说明这一点，我还在每个指令的相同相对位置添加了两个对

console.log（）

的调用

• 在link（）的主体中，在调用

  lifoRunner.push（）

  之前，I

  log（“link”）

• 在传递给

  lifoRunner.push（）

  的函数的第一行，I

  log（“Stack”）

加载小提琴时，您将看到单元格的大小与预期一致，并且您将在控制台中找到以下内容以建立评估顺序：

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

干杯