Question

在拥挤的屏幕上，我有它正在结合许多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>

控制器支持如下：

$scope.toggleCurveForm = function () {
   $scope.showCurveForm = !$scope.showCurveForm;
};

问题是否存在不需要让我的控制器与许多这些＆＃34;交换机混乱的模式？＆＃34;

看起来很冗长。我只想翻转一个Boolean，同时仍然遵循说我的控制器应该很薄的所有指南。

Answer 1

您可以点击右键分配您的开关：

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

Plunker example

Answer 2

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

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>'
    };
});

通过这种方式，您可以将HTML删除为：

<toggle-this></toggle-this>

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

使用上面的代码，查看this fiddle的工作示例。

角度是否有更优雅的隐藏/显示模式？

2 个答案: