Question

我有一个有5个标签的页面。还有另一个页面包含指向这些选项卡的链接。每当用户单击此页面上的链接时，应在角度应用程序页面上打开相应的选项卡。

当用户无误地点击标签时，标签工作正常，但我无法找到默认情况下如何选择标签。

在app.js中添加：

$routeProvider.when('/trend', {
    templateUrl:'partials/trend.html'
}).when('/deepdive', {
    templateUrl:'partials/deepdive.html'
}).when('/driversNdrainers', {
    templateUrl:'partials/DriversNDrainers.html'
}).when('/timeline', {
    templateUrl:'partials/timeline.html'
}).otherwise("/trend");

索引页：

<div header></div>
<div class="row">    
<div class = "col-md-12" ng-include="'partials/home.html'"></div> 
</div>
<div footer></div>

家庭控制器动态创建标签。 Home.html中

<div class="" fade-in ng-controller="HomeCtrl">
<ul class="nav nav-pills">
  <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}"  id="{{tab.id}}"
  ng-click="setSelectedTab(tab)">{{tab.label}}</a></li>
</ul>
<div ng-view></div>`enter code here`

控制器：

$scope.selectedTab = $scope.tabs[0];    

$scope.setSelectedTab = function(tab) {
    $scope.selectedTab = tab;
};

$scope.tabClass = function(tab) {
    return $scope.selectedTab == tab? "active": "";
};
angular.element(document).ready(function () {
   $.each($scope.tabs,function(i){
    if(this.link==location.hash){
        $scope.setSelectedTab(this);
        //$state.go("/trend");
        return;
    } 
});
});

}]）;

我在这里看到的是选中了标签但是没有加载标签内的内容。

Answer 1

您在jQuery中的代码不会在Angular的摘要周期中执行。尝试在$scope.$apply();

之后立即添加$scope.setSelectedTab(this);

要理解为什么要这样做：＆＃34;范围生命周期＆＃34;在https://docs.angularjs.org/guide/scope

Answer 2

这里的解决方法可以参考stackblitz

为了达到我的要求，我不得不对其功能做一些修改。

修改方案：

moveToSelectedTab(tabName: string) {

for (let i = 0; i < document.querySelectorAll('[aria-selected]').length; i++) {
  let element = document.querySelectorAll('[aria-selected="false"]')[i];
  if (element != undefined) {
    if ((<HTMLElement>document.querySelectorAll('[aria-selected="false"]')[i]).innerHTML == tabName) {
      (<HTMLElement>document.querySelectorAll('[aria-selected="false"]')[i]).click();
      
    }
  }
}}

<块引用>

HTML

<ul class="nav nav-tabs" id="editorTab" role="tablist">
  <li class="nav-item active" role="presentation">
    <a class="nav-link active" id="bannerArea-tab" data-toggle="tab" href="#bannerArea" role="tab"
       aria-controls="bannerArea" aria-selected="true">General Information</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="cardArea-tab" data-toggle="tab" href="#cardArea" role="tab"
       aria-controls="cardArea" aria-selected="false">Banner Content</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="mainArea-tab" data-toggle="tab" href="#mainArea" role="tab"
       aria-controls="mainArea" aria-selected="false">Main Content</a>
  </li>
</ul>
<div class="tab-content" id="editorTabContent">
  <div class="tab-pane fade show active col-sm-12" id="bannerArea" role="tabpanel" aria-labelledby="bannerArea-tab">
     <div class="form-group">
      
    </div>
    <div class="text-right margin-top-xl">
     
      <button class="btn-icon-confirm" (click)="moveToSelectedTab('Banner Content')">Next<i class="material-icons">arrow_forward</i></button>
    </div>
  </div>
  <div class="tab-pane fade show active col-sm-12" id="cardArea" role="tabpanel" aria-labelledby="cardArea-tab">
    <div class="form-group">
      
    </div>
    
    <div class="text-right margin-top-xl">
     
      <button class="btn-icon-confirm" (click)="moveToSelectedTab('Main Content')">Next<i class="material-icons">arrow_forward</i></button>
    </div>
  </div>
  <div class="tab-pane fade col-sm-12" id="mainArea" role="tabpanel" aria-labelledby="mainArea-tab">
    
    <div class="text-right margin-top-xl">
      <button class="btn-icon-confirm" (click)="moveToSelectedTab('General Information')"><i class="material-icons">check</i></button>
    </div>
  </div>
</div>

Angular如何重定向到选项卡

2 个答案: