有角度更優雅的隱藏/顯示模式嗎？

在一個擁擠的屏幕上，我正在整合許多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; 
};

問題是否有不需要我塞滿我的控制器模式許多這些「開關？」

它看起來很冗長。我只想翻轉Boolean，同時仍然遵循所有說我的控制器應該很薄的指南。

來源

2014-07-22 R Claven

這真的是基於意見的 - 有很多很多的方法，而「最好」的方法將取決於你想要做的事情。這就是說，你有沒有考慮過在單獨的文件中使用模板？如果你將這個概念與多個控制器結合起來，你可以真正地清理乾淨。 –

我真誠地感謝您的迴應，但我不確定您的意思是「在單獨的文件中使用模板？」 –

我會考慮一些事件代表團，但目前我沒有解決方案。 –

你可以，當然，創建自己的指令。例如：

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查看工作示例，使用上面的代碼。

來源

2014-07-22 16:41:58

您可以直接在點擊這樣的分配交換機：

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

Plunker example

來源

2014-07-22 16:14:22

這是更清潔！我只是希望在文檔中看到「切換 - 這個」指令。但是，這工作！ –

有角度更優雅的隱藏/顯示模式嗎？

回答

相關問題