events - Angular .js : watch one object's height and update other object's padding

Question

我可以在指令中观察一个对象的属性(实际上是 clientHeight)。但是如何根据这个高度改变其他对象的padding-top呢？我知道如何使用 jQuery 执行此操作，但我正在寻找 Angular 方法。

在 Angular 中，可以使用指令访问某些页面元素。好的，但是如何在同一指令中访问其他页面元素？

Answer 1

有多种方法可以做到这一点。对于下面的所有建议，假设您有两个指令 - 一个用于观察 clientHeight，另一个用于调整填充。

• 创建一个服务(注入(inject)到两个指令中)。让第一个指令修改服务中的对象属性(例如，someObj.prop1)。另一个指令 $watches 该对象属性。
• 使用事件。让第一个指令 $emit 或 $broadcast 一个事件，第二个指令可以使用 $on 监听它(在它的链接函数或它自己的 Controller 中)。

• 如果存在祖先关系，您可以在后代指令中要求祖先指令的 Controller 。参见 AngularJS: reuse component with different parent举个例子。

• 不推荐，但另一种选择:使用 $rootScope 而不是服务:将 $rootScope 注入(inject)到两个指令中。让第一个指令修改 $rootScope 上的对象属性。另一个指令 $watches 该对象属性。