Javascript 有没有更优雅的隐藏/显示模式？

在一个拥挤的屏幕上，我看到它合并了许多ng hide/ng show指令

通常的做法是：

<div  . . ng-hide="showCurveForm" ng-click="toggleCurveForm()">
                    Show Curve Form
</div>
<div  . . ng-show="showCurveForm" ng-click="toggleCurveForm()">
                    Hide Curve Form
</div>

问题是否存在不需要我用这些“开关”将控制器弄乱的模式

---

这似乎太冗长了。我只想翻转一个

布尔值

，同时仍然遵循所有说明我的控制器应该精简的指南。

您可以按如下方式在鼠标右键分配开关：

<a href ng-click="showCurveForm = !showCurveForm">Toggle</a>

---

当然，您可以创建自己的指令。例如：

app.directive('toggleThis', function(){
    return {
        restrict: 'E',
        template: '<div ng-hide="showCurveForm" ng-click="toggleCurveForm()">Show Curve Form</div>'+
    '<div ng-show="showCurveForm" ng-click="toggleCurveForm()">Hide Curve Form</div>'
    };
});

app.directive（'toggleThis'，function（）{
返回{
限制：'E'，
模板：“显示曲线形状”+
“隐藏曲线形式”
};
});

通过这种方式，您可以将HTML拆分为以下内容：

它将替换为您的指令模板。此外，此新指令可在整个站点/应用程序中重复使用

---

请参阅上面的工作示例，使用您的代码。

这确实是基于意见的-有很多种方法，“最佳”方法取决于您正在尝试做什么。也就是说，您是否考虑过在单独的文件中使用模板？如果你将这个概念与多个控制器结合起来，你就可以真正地解决问题。我真诚地感谢你的回复，但我不确定“在单独的文件中使用模板”是什么意思。我会研究某种事件委派，但目前我没有解决方案。这更干净！我只是希望有一个我在文档中没有看到的“切换此”指令。但这是有效的！

app.directive('toggleThis', function(){
    return {
        restrict: 'E',
        template: '<div ng-hide="showCurveForm" ng-click="toggleCurveForm()">Show Curve Form</div>'+
    '<div ng-show="showCurveForm" ng-click="toggleCurveForm()">Hide Curve Form</div>'
    };
});