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, она ничего не пишет, несмотря на тот же параграфический вывод

<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>

---

Правка пробовала 2 предположения, что VM сломала код, а 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>

---

В противном случае вы можете использовать контроллер как синтаксис

<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>