Question

我是Angular和ui-router的初学者。我正在尝试根据当前状态名称为标题中的选项卡应用活动类。

    <ul class="tabs">
        <li id="tab1" ng-class="navTabClass(this.id)">
            <a href="link1.html">Home
            </a>
        </li>
        <li id="tab2" ng-class="navTabClass(this.id)">
            <a href="link2.html">Sales
            </a>
        </li>
    </ul>

我在控制器中定义了一个函数，用于通过检查选项卡ID和当前状态名称来确定类（在删除父视图的名称之后）

 `$scope.navTabClass = function(tabId) {
                            console.log(tabId);
                            var stateName = $state.current.name;
                            mainTab = stateName.split('.');
                            return (mainTab[1] === tabId) ? 'active' : 'passive';
                        }

我打印出收到的标签，它始终是“未定义的”。不用说，该函数总是作为类名返回被动

如何将id值正确传递给受控函数？

Answer 1

ng-class需要一个对象，所以

请改为尝试：

<ul class="tabs">
    <li id="tab1" ng-class="{'active': activeTab === 'tab1'}" ng-click="changeTab('tab1')">
        <a href="link1.html">Home
        </a>
    </li>
    <li id="tab2" ng-class="{'active': activeTab === 'tab2'}" ng-click="changeTab('tab2')">
        <a href="link2.html">Sales
        </a>
    </li>
</ul>

然后你的JS看起来像这样：

$scope.changeTab = function(tabName){
    $scope.activeTab = tabName;
    console.log('tabName', tabName);
}

这会翻转标签的状态

Answer 2

嗨，请看那个演示：

http://plnkr.co/edit/cyZPh5h1lIYykqrh8Igh?p=preview

你可以使用ui-sref-active指令更多信息，你可以在这里找到

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

 <ul class="tabs">
    <li id="tab1" ui-sref-active="active">
      <a ui-sref="state1">State 1</a>
    </li>
    <li id="tab2" ui-sref-active="active">
      <a ui-sref="state2">State 2</a>
    </li>
  </ul>

将html元素id传递给ng-class

2 个答案: