Question

嘿伙计们，我想知道我是否通常会在Angular项目中创建这个混乱的解决方案：

app.controller('indexController', function ($scope) {
    scope.hideWinkelContainer = true;
    scope.hideWinkelPaneel = true;
    scope.headerCart = false;
    scope.showCart = function () {
        scope.hideWinkelContainer = false;
        scope.hideWinkelPaneel = false;
    };
    scope.hideCart = function () {
        scope.hideWinkelContainer = true;
        scope.hideWinkelPaneel = true;
    };
});

HTML：

<div class="containerWinkelwagen" ng-hide="hideWinkelContainer"> <div class="winkelWagenPaneel" ng-hide="hideWinkelPaneel">
    <div class="winkelWagenTerug" ng-click="hideCart()"></div>
    <div class="winkelWagenTerug" ng-click="showCart()"></div>
 </div> 
</div>

随时欢迎最佳做法，提示和示例！

Answer 1

您只需使用toggle功能，如下所示：

app.controller('indexController', function ($scope) {
    $scope.hideWinkelContainer = true;
    $scope.hideWinkelPaneel = true;
    $scope.headerCart = false;

    $scope.toggleCart = function () {
        $scope.hideWinkelContainer = !$scope.hideWinkelContainer;
        $scope.hideWinkelPaneel    = !$scope.hideWinkelPaneel;
    };
});

在您的HTML中：

<div class="containerWinkelwagen" ng-hide="hideWinkelContainer">
    <div class="winkelWagenPaneel" ng-hide="hideWinkelPaneel">
        <div class="winkelWagenTerug" ng-click="toggleCart()"></div>
        <div class="winkelWagenTerug" ng-click="toggleCart()"></div>
    </div> 
</div>

Answer 2

您可以在工厂中实现一次show / hide功能，然后将其注入需要它的控制器中。节省了很多样板。

Angularjs隐藏显示清洁编码

2 个答案: