javascript - ng 类表达式无法解析

Question

我昨天才开始尝试 Angular。我正在尝试使用 Bootstrap 选项卡功能。我想根据用户单击的选项卡将“active”类动态添加到事件 li 中。下面是我的 HTML 片段。

<div ng-controller="TabController as tabs">

{{currentTab}}
<ul class="nav nav-pills" >
  <li ng-class="{'active':tabs.isTab('Events')}" ><a href="#" ng-click="setTab('Events')">Events</a></li>
  <li ng-class="{'active':tabs.isTab('Surveys')}" ><a href="#" ng-click="setTab('Surveys')">Surveys</a></li>
  <li ng-class="{'active':tabs.isTab('Forums')}" ><a href="#" ng-click="setTab('Forums')">Forums</a></li>
</ul>

我正在做的是，当用户单击任何链接时，我将使用选项卡名称调用 setTab() 方法，并更改“currentTab”的值。如您所见，我正在打印“的值” currentTab”位于页面顶部，并且第一次打印为“事件”。当用户单击不同的选项卡时，我可以更改 currentTab 的值(页面上打印的值正在更改)。但唯一的问题是，“事件”类没有添加到所选选项卡中。对于每个 li，我通过调用 isTab() 方法检查 currentTab 值是否与特定选项卡匹配。我在 isTab() 方法中放入了一些日志，但没有打印任何日志。

下面是我的模块和 Controller 定义。

var app = angular.module('myApp',[]);

app.controller('TabController',['$scope','$http', function($scope, $http) {

$scope.currentTab = 'Events';

$scope.setTab = function(tabName)  {
    console.log('in setTab '+tabName);      // this is getting called
    $scope.currentTab = tabName;
};

$scope.isTab = function(tabName)  {
    console.log('in isTab '+tabName);                  // this is never printed!
    return $scope.currentTab === tabName;
    //return true;
};  

}]);

Answer 1

这是因为 controller as 语法。如果您使用这个，您应该在 this 中定义所有 View 模型数据，包括函数:

this.isTab = function(tabName)  {
    console.log('in isTab '+tabName);
    return this.currentTab === tabName;
};  

它会起作用。