1

私の AngularJS アプリケーションでは、各セクションにスライダー コントロールを含むアコーディオンを作成する必要があります。アコーディオンとスライダーの両方で API を外側のコントローラーに公開する必要があります。次に例を示します。

accordion.collapseAll()
accordion.openNextPane()

また

slider.resetValue()

そして、コントローラーで次のようなことができるようにしたいと思います。

$scope.clickNext = function() {
    $scope.accordion.openNextPane();
};

$scope.clickResetAll = function() {
    $scope.items.forEach(function(item, ind) {
        $scope.slider[ind].resetValue();
        // or:
        $scope.accordion.pane[ind].slider.resetValue();
    });   
}

アコーディオンとスライダーの分離スコープ ディレクティブを作成し、双方向バインディングを使用して、メソッドを親コントローラーに公開できるようにすることを考えています。ページ テンプレートは次のようになります。

<div ng-controller="myController">
    <accordion data="accordion">
        <div ng-repeat="c in collection">
            <accordion-pane>
                <slider data="slider"></slider>
            </accordion-pane> 
        </div>
    </accordion>
</div>

しかし、この時点で、分離スコープと子の可視性の制限の迷路に迷い込んでおり、外側のコントローラーから内側の要素にアクセスする方法がないようです。私がグーグルで調べた多くのソリューションは、ディレクティブがコントローラーと通信するのではなく、逆の方法で通信するのが正常であると考えているようですが、これはカプセル化を破るようです。

これを行う方法について何か考えはありますか？この問題に対する正しい AngularJS パターンは何ですか?

4

0 に答える 0