Question

我已经写了两个自定义指令。

他们的名字是app-content和app-content-item。它们应该在一些即将到来的项目中使用，以便为这些项目提供基本样式的基本脚手架。它们将成为模块的一部分。它们应该像这样嵌套：

<app-content>
    <app-content-item>
        html...
    </app-content-item>
    <app-content-item>
        html...
    </app-content-item>
    .
    .
<app-content>

在app-content的链接功能中，我调用一个方法来搜索指令子app的app-content-item-tags，并使用特定的算法和内部的可用空间设置这些元素的宽度和高度。 app-content-container。

据我所知，仅使用css无法实现所需的布局。必须涉及一些JavaScript。

现在我没有注意到角度$ timeout-service，并且在指令渲染后调用函数没有延迟。此代码段取自app-content指令链接函数：

$timeout(function(){
    scaleLayout();
});

到目前为止一切正常。

问题是，app-content-item-containers将由应用程序使用我的组件填充。这意味着app-content-item-containers的内容可能随时发生变化。如果它们发生变化，则必须再次调用scaleLayout（）函数。

我不希望我的组件的用户负责调用方法。该组件应尽可能为用户设置黑盒。

对于我的组件的用户，它应该感觉这是由css完成的，所以他不必担心它。

到目前为止，我已尝试过以下方法：

DOMSubtreeModified-Event（过于频繁地触发并导致应用程序崩溃）
在元素html上设置观察者（过早触发）

Answer 1

使用事件处理程序。在做出改变时：

$rootScope.$broadcast("updateLayout");

对于听众：

$scope.$on('updateLayout', function () {
       //layout stuff here
    });

DOM更改后运行Javascript

1 个答案: