クリック時にデータターゲットのサブメニューを切り替える角度の方法は？

Question

ng-click関数を使用して、クリックしたターゲット角度材料md-buttonのデータターゲット属性を取得しようとしています。そのため、sidenavでトピックをクリックすると、そのサブメニューが表示されます。

私は示唆したようにmd-listを使ってナビゲーションを構造化しましたが、この動作を得る方法を考え出すことはできません。特に.sidenav-submenu要素は直接の子ではありませんクリックされたmdボタンの

これは、このようなことを達成するための最良の方法でもありませんが、角度のある素材のsidenavサブメニューディレクティブの不足によって制限されています。

HTML：

<md-item> 

    <md-button id="sidenav-paymentsButton" data-ng-click="toggleSubmenu($event)" data-target="#paymentsSubmenu"> 

    <md-content class="sidenav-link" md-ink-ripple="#3a455f" layout="row" layout-align="space-between center"> 

     <div layout="row" layout-align="start center"><span class="sidenav-link-icon material-icons">money_off</span> 

     Payments 

     </div> 

    <div><span class="expandSubmenu material-icons">keyboard_arrow_down</span></div> 

    </md-content> 

</md-button> 

<md-list id="paymentsSubmenu" class="sidenav-submenu"> 

    <md-item> 

    <md-button ui-sref="newPayment"> 

     <md-content class="sidenav-link" md-ink-ripple="#3a455f" layout="row" layout-align="start center"> 

     <span class="sidenav-link-icon material-icons">create</span> 

     New Payment 

     </md-content> 

    </md-button> 

    </md-item> 

からNavController JS：

app.controller('navController', function($scope, $state, $document) { 

    angular.element('.sidenav-submenu').hide(); 

    $scope.toggleSubmenu = function($event) { 
    var target = $event.target; 
    // Not sure what to do next 
    } 

}) 

Answer 1

あなたのコントローラでDOM操作を行うべきではありません。 DOM操作にディレクティブを使用します。つまり、あなたが望むのは、anglejにまだ組み込まれていないカスタム指示を必要としないということです。

は、次のunstyledマークアップを考えてみましょう：あなたは少しのマークアップを変更する場合は、技術的にも、この例では、コントローラを必要としない

app.controller('navController', function($scope) { 
    $scope.nav = { 
    selected: 'A' 
    }; 
}); 

：以下、コントローラと組み合わせて使用​​

<div data-ng-click="nav.selected = 'A'"> 
    Your toggle for the "A" side nav. 
</div> 
<div data-ng-click="nav.selected= 'B'"> 
    Your toggle for the "B" side nav. 
</div> 


<div ng-if="nav.selected === 'A'> 
    The "A" side nav. 
</div> 
<div ng-if="nav.selected === 'B'> 
    The "B" side nav. 
</div> 

これを独自の例に移すときにポップアップする場合は、「ドットの問題」を回避するのに役立ちます。