Question

有两个不同的div，可以在Angualar应用程序中打开和关闭，但试图确保如果打开另一个关闭。看起来这样在NG中应该很简单，但对Angular来说还是新手。任何人有任何指针？

在这里举个例子： JS Fiddle

以下是样本：

 <body ng-app="simpleToggle">
   <div ng-controller="AppCtrl">
    <button ng-click="toggleCustom1()">Custom</button>
    <span ng-hide="custom1">
        <h2>Custom 1 is showing but Custom 2 should not be if it was already opened</h2>
    </span>
    <span ng-show="custom1"></span>
</div>

<div ng-controller="App2Ctrl">
    <button ng-click="toggleCustom2()">Custom2</button>
    <span ng-hide="custom2">
        <h2>Custom 2 is showing but Custom 1 should not be if it was already opened.</h2>
    </span>
    <span ng-show="custom2"></span>
</div>
 </body>

 angular.module('simpleToggle', [])
.controller('AppCtrl',['$scope', function($scope){
    $scope.custom1 = true;
    $scope.toggleCustom1 = function() {
        $scope.custom1 = $scope.custom1 === false ? true: false;
    };
 }])
.controller('App2Ctrl',['$scope', function($scope){
    $scope.custom2 = true;
    $scope.toggleCustom2 = function() {
        $scope.custom2 = $scope.custom2 === false ? true: false;
    };
 }]);

Answer 1

在这里，您要处理范围层次结构，您将希望使用其中一种机制来协调控制器。一些选项是：

使用$ rootScope
使用消息

我已更新您的示例以在此使用$ rootScope http://jsfiddle.net/4q7hrpc5/3/

首先，创建一些东西来初始化$ rootScope。我创建了一个外部控制器并将另外两个控制器包装在该控制器中。这是更新的HTML：

<body ng-app="simpleToggle">
    <div ng-controller="OuterCtrl">
        <div ng-controller="AppCtrl">
            <button ng-click="toggleCustom1()">Custom</button>
            <span ng-hide="!custom1">
                <h2>Custom 1 is showing but Custom 2 should not be if it was already opened</h2>
            </span>
        </div>

        <div ng-controller="App2Ctrl">
            <button ng-click="toggleCustom2()">Custom2</button>
            <span ng-hide="!custom2">
                <h2>Custom 2 is showing but Custom 1 should not be if it was already opened.</h2>
            </span>
        </div>
    </div>
</body>

这是控制器的代码：

angular.module('simpleToggle', [])
    .controller('OuterCtrl', ['$rootScope', function($rootScope) {
        $rootScope.custom1 = false;
        $rootScope.custom2 = false;
    }])
    .controller('AppCtrl',['$rootScope', '$scope', function($rootScope, $scope){
        $scope.toggleCustom1 = function() {
            $rootScope.custom1 = !$rootScope.custom1;
            $rootScope.custom2 = false;
        };
}])
    .controller('App2Ctrl',['$rootScope', '$scope', function($rootScope, $scope){
        $scope.toggleCustom2 = function() {
            $rootScope.custom2 = !$rootScope.custom2;
            $rootScope.custom1 = false;
        };
}]);

现在，这种特定技术仅适用于少数必须协调的事情。如果您需要协调大量这些内容，则消息或服务可能会更好。另一种选择是将它们全部放入同一个控制器中。

Answer 2

使用指令处理DOM Stuffs是一个很好的做法。我使用.next()来获取下一个范围。或者您可以使用其他选择器来获取它。

elem的文档：https://docs.angularjs.org/api/ng/function/angular.element

在这里工作 here

HTML：

<body ng-controller="MainCtrl">
    <div>
        <button change-toggle>Custom</button>
        <span id="span1" class="toggle-show-css">
            <h2>Custom 1 is showing but Custom 2 should not be if it was already opened</h2>
        </span>
    </div>
    <div>
        <button change-toggle>Custom2</button>
        <span id="span2" class="toggle-show-css">
            <h2>Custom 2 is showing but Custom 1 should not be if it was already opened.</h2>
        </span>
    </div>
</body>

CSS

.toggle-hide-css {
  visibility: hidden;
}

.toggle-show-css {
  visibility: visible;
}

指令

app.directive('changeToggle', ['$location', function($location) {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      elem.bind('click', function(event) {
        var spanner = elem.next();
        if(spanner.hasClass("toggle-show-css")) {
          elem.parent().parent().find('span').removeClass("toggle-show-css");
          elem.parent().parent().find('span').addClass("toggle-hide-css");
          spanner.removeClass("toggle-show-css");
          spanner.addClass("toggle-hide-css");
        } else {
          elem.parent().parent().find('span').removeClass("toggle-show-css");
          elem.parent().parent().find('span').addClass("toggle-hide-css");
          spanner.removeClass("toggle-hide-css");
          spanner.addClass("toggle-show-css");
        }
      });
    }
  }
}]);

如果打开另一个角度，则关闭角度确保切换

2 个答案: