使用带 angular 的按钮显示和隐藏指令

Question

我有三个指令在我的主视图中显示不同的数据。

     <div>
        <sales-view></sales-view>
    </div>

     <div>
         <units-view></units-view>
     </div>

还有一组这样的按钮：

     <div class="btn-group">
         <button class="btn btn-primary" type="button">Sales</button>
         <button class="btn btn-white" type="button">Units</button>
     </div>

我想要的是根据用户选择显示或隐藏我的指令，但我不知道如何实现，我不知道逻辑是在控制器中还是在指令中。

一些帮助会很好，我坚持这个。

Answer 1

我能理解你的point.I认为这个简单的逻辑可以直接写在模板中html.And如果要复杂，请使用配置映射（或gettersetter) 相反。

<!-- edit html -->
<div>
    <sales-view ng-show="showData == 1"></sales-view>
</div>
<div>
    <units-view ng-show="showData == 2"></units-view>
</div>

<div class="btn-group">
    <button class="btn btn-primary" type="button" ng-click="showData = 1">Sales</button>
    <button class="btn btn-white" type="button" ng-click="showData = 2">Units</button>
</div>

使用带 angular 的按钮显示和隐藏指令

Show and hide directives using buttons with angular

javascript

angularjs

angular-directive