0

これがフィドルです：http://jsfiddle.net/yFyxL/2/

angular.module("myApp", []) //
.controller('MainController', function($scope) {
    $scope.toggle1 = function() {
        $scope.$broadcast('event:toggle');
    }
    $scope.toggle2 = function() {
        $scope.$broadcast('event:toggle');
    }
}) //
.directive('toggle', function() {
    return function(scope, elem, attrs) {
        scope.$on('event:toggle', function() {
            elem.slideToggle();
        });
    };
});

したがって、toggle1 または toggle2 をクリックすると、両方のコンテナーが同時に開きます。しかし、私はそれらを個別に切り替えたいと思っています。どうすればこれを達成できますか？

4

1 に答える 1

2

イベントを分離するために何かをしなければなりません。ブロードキャストでいくつかの追加データを提供できます。

angular.module("myApp", []) //
.controller('MainController', function($scope) {
    $scope.toggle1 = function() {
        $scope.$broadcast('event:toggle','1');
    }
    $scope.toggle2 = function() {
        $scope.$broadcast('event:toggle','2');
    }
}) //
.directive('toggle', function() {
    return function(scope, elem, attrs) {
        scope.$on('event:toggle', function(ev,id) {
            if(attrs.toggle === id){ elem.slideToggle(); }
        });
    };
});

<div class="div1" toggle="1">
  <p>This is section #1</p>
</div>
<div class="div2" toggle="2">
  <p>This is section #2</p>
</div>

私のフォークを参照してください: http://jsfiddle.net/vBzkV/

于 2013-04-29T07:13:27.183 に答える