Question

我在Angular JS中添加了一个自定义指令。我添加了一个页面，其中有4个div标签。这4个div标签不会一次显示，但它们会显示在标签中，因此在点击特定标签时会显示相应的div。

但是当页面加载时，所有div标签都被加载，因此在加载页面时会调用指令。但我想要实现的是当div标签可见时（点击标签）它应该执行该指令。

有没有办法实现这个目标？

感谢。

- 更新 - 1

让我用更多细节解释我的问题..

我正在使用boot-strap data-toggle =“tab”显示标签，因此当我选择特定标签时，它会显示该标签内容..但是单击标签引导程序会显示/隐藏标签，方法是应用css。

<a href="!#tab_1" data-toggle="tab">
<a href="!#tab_2" data-toggle="tab">
<a href="!#tab_3" data-toggle="tab">

<div class="tab-pane fade" id="tab_1">
    ... some content
</div>

<div class="tab-pane fade" id="tab_2">
    <table>
        <tr ng-repeat="user in userList">
            <td>{{user.name}}</td>
            <td>{{user.contact}}</td>
            <a href="!#new_user_modal" data-toggle="modal">View</a> &nbsp;
            <a href="!#new_user_modal" data-toggle="modal">Edit</a>
        </tr>
    </table>
</div>

<div class="tab-pane fade" id="tab_3">
    ... some content
</div>

<new-user-modal username="name"></new-user-modal>

所以，现在当我默认加载页面时，tab_1被选中/激活，但其他标签已经加载但是被隐藏了。这里<new-user-modal>是一个自定义指令，它指向使用templateUrl ../../newUserTemplate.html的模板，其中包含id为new_user_modal的div。

因此，当我选择tab_2时，我会看到用户列表，所有用户行都将具有“查看”操作，当我单击“查看”操作时，它会使用newUserTemplate.html模板显示弹出窗口。我已经实现了一个自定义指令，将表单中的所有字段显示为只读，因此当用户单击View操作时，它应该以只读模式显示所有字段。

模板（../../newUserTemplate.html）div的id为new_user_modal，这个自定义指令只读添加到它，所以当我第一次加载页面时默认情况下选择tab_1那个时候它的调用是只读的自定义指令。

但是我希望在单击动作时调用它，所以基于它我可以在只读或编辑模式下打开模态。

如果您需要任何其他详细信息，请与我们联系。

- 更新-2

基本上我创建了两个指令，一个是 new-user-modal ，另一个是只读。

第一个指令是在一个模态（弹出窗口）中加载用户详细信息，正如我所解释的那样是使用data-toggler = modal生成的。该指令 new-user-modal 具有模板，该模板是具有用户相关字段的表单，因此当用户单击任何用户记录时，此模式将显示用户信息..

new-user-modal 指令指向模板文件../newUserTemplate.html，其中我有所有用户字段。在这个模板中，我添加了另一个自定义指令只读，因此如果用户点击查看用户操作，它将在只读视图中打开此模式意味着所有表单字段都是只读的，如果用户点击编辑用户操作，相同的模态将在编辑模式下打开。

但是，由于这个模态是使用bootstrap生成的，所以当第一次加载页面时已经加载了这个模态，但它已隐藏。因此，在加载页面时调用指令而不是在显示模态时调用..

Answer 1

嗯，您可以使用ng-if作为指令，并检查当前标签是否已打开。 ng-if仅在值为true时从头开始重新编译指令，或者在您的情况下

这样的事情：

<tabs>
   <pane title="Tab1">
      <directive ng-if="tab1.active"> </directive>
   </pane>
   <pane title="Tab2">
      <directive ng-if="tab2.active"> </directive>
   </pane>
</tabs>

这是你想要的吗？使用$compile还有另一种方法，但它不太正确。如果此解决方案适合您，请告诉我。

干杯！

div可见时应用AngularJS指令

1 个答案: