Нужно вызвать ng-switch по URL-адресу или $location

Я пытаюсь использовать URL-адрес для вызова элемента вкладки. Например, такой URL-адрес, как: localhost:9000/widget&view=map, попадет на страницу с выбранной вкладкой карты и покажет тело вкладки карты.

<div class="search-result-tab" ng-init="selectTab='list'">
    <ul class="nav tab-header">
        <li ng-class="{active: selectTab=='list'}" ng-click="selectTab='list'; changedTab()">
            <a href={{listTabURL}}>List</a>
         </li>
         <li ng-class="{active: selectTab=='map'}" ng-click="selectTab='map'; changedTab()">
             <a href={{mapTabURL}}>Map</a>
         </li>
      </ul>
      <div class="tab-body" ng-switch on="selectTab">
          <div class="tab-content" ng-switch-when="list">
              <div ng-include="'list.html'"></div>
          </div>
          <div class="tab-content" ng-switch-when="map">
              <div ng-include="'map.html'"></div>
          </div>
     </div>
 </div>

Другие URL-адреса:

  • список: localhost:9000/widget&view=list
  • карта: localhost:9000/widget&view=map

url angularjs location ng-switch
person Willy    schedule 02.06.2015    source источник
comment
Возможно, вы захотите использовать что-то вроде ui-router, которое может управлять состоянием и сопоставление URL для вас!   -  person Ben Heymink    schedule 02.06.2015
comment
@BenHeymink спасибо за предложение, однако мы не используем ui-router на этом этапе, так что есть ли другой способ добиться этого?   -  person Willy    schedule 04.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

Аналогичный вопрос здесь. Одно из предложений состоит в том, чтобы внедрить службу $location и включить $location.path, возможно, стоит попробовать, если вы не собираетесь пробовать ui-router (на что вам действительно стоит обратить внимание!)

function Ctrl($scope, $location) {
  $scope.pagename = function() { return $location.path(); };
};

<div id="header">
  <div ng-switch on="pagename()">
    <div ng-switch-when="/home">Welcome!</div>
    <div ng-switch-when="/product-list">Our products</div>
    <div ng-switch-when="/contact">Contact us</div>
  </div>
</div>
person Ben Heymink    schedule 04.06.2015