Ng單擊和md按鈕沖突

Question

我在使用MD按鈕內的鏈接以正常加載頁面上的內容時遇到麻煩

<a class="wordpress" href="#" ng-click="active='Wordpress'">Wordpress</a>

然后只寫我需要的內容

<p ng-show="active === 'Wordpress'">Find a sample of my wordpress codeing</p>

但這不適用於md按鈕，盡管具有相同的paragragh輸出，但它不會寫入任何內容

<md-menu-item>
  <md-button>
    <a class="TokusatsuSeries" ng-click="active='TokusatsuSeries'">
      Tokusatsu Series/Five Year War
    </a>
  </md-button>
</md-menu-item>

<p ng-show="active === 'TokusatsuSeries'">You chose <b>{{active}}</b></p>

---

Edit嘗試了VM破壞代碼的2條建議，而CTR並沒有比我原來的更好：

<md-menu-item>
            <md-button>
                    <a class="TokusatsuSeries" 
                       ng-click="$ctrl.active='TokusatsuSeries'">Tokusatsu Series/Five Year War
                    </a>
            </md-button>
</md-menu-item>

和該段寫

<p ng-show="$ctrl.active === 'TokusatsuSeries'">You chose <b>{{active}}</b></p>

Answer 1

似乎出現此問題是因為一種材料成分創建了自己的scope 。 您應該避免這種情況。 如果您正在使用AngularJS組件，則應綁定到$ctrl即

<md-menu-item>
    <md-button>
        <a class="TokusatsuSeries" 
           ng-click="$ctrl.active='TokusatsuSeries'">Tokusatsu Series/Five Year War
        </a>
    </md-button>
</md-menu-item>

<p ng-show="$ctrl.active === 'TokusatsuSeries'">You chose <b>{{active}}</b></p>

---

否則，您可以使用controllerAs語法

<div ng-controller="SomeController as vm">
    <md-menu-item>
        <md-button>
            <a class="TokusatsuSeries" 
               ng-click="vm.active='TokusatsuSeries'">Tokusatsu Series/Five Year War
            </a>
        </md-button>
    </md-menu-item>

    <p ng-show="vm.active === 'TokusatsuSeries'">You chose <b>{{active}}</b></p>
</div>