如何鏈接到特定的Angular-ui靜態選項卡

Question

我需要鏈接到另一個視圖上的特定選項卡。 我一直在研究，但是我不確定最簡單的方法是什么。 我正在使用angular-ui靜態選項卡。 標簽中沒有太多信息，所以我沒有使用任何類型的模板。 我目前正在使用ng-route進行路由，如果我需要添加ui-router來完成這項工作，那很好。

Home.html中

<button>
    Link to Video Email Visit Tab
</button>

PatientServices.html

<tabset justified="true">
     <tab heading="Online Visit">
        <p>
            Like many other uses of the Internet these days, online visit saves you time by allowing you to receive care.
        </p>
     </tab>

     <tab heading="Video Email Visit">
          <p>
             Meet with your doctor online and get treated for almost any health issue, as long as it isn't a medical emergency.
          </p>
     </tab>
</tabset>

錯誤

 Error: Failed to execute 'setAttribute' on 'Element': 'dept-title-tabs"' is not a valid attribute name.
at Error (native)
at Function.n.extend.attr (http://localhost:63193/js/jquery.min.js:4:10701)
at e.attr (http://localhost:63193/js/jquery.imedica.min.js:4:1905)
at n.access (http://localhost:63193/js/jquery.min.js:3:2985)
at n.fn.extend.attr (http://localhost:63193/js/jquery.min.js:4:10224)
at $.fn.(anonymous function) (http://localhost:63193/js/jquery.imedica.min.js:1:3283)
at $.fn.(anonymous function) [as attr] (http://localhost:63193/js/jquery.imedica.min.js:2:5666)
at Object.Attributes.$set (http://localhost:63193/js/angular/angular.js:6721:28)
at http://localhost:63193/js/angular/angular.js:7770:15
at forEach (http://localhost:63193/js/angular/angular.js:330:20)

更新錯誤

 Error: [$compile:nonassign] Expression 'currentTab == 'email'' used with directive 'tab' is non-assignable!
 http://errors.angularjs.org/1.3.5/$compile/nonassign?p0=currentTab%20%3D%3D%20'email'&p1=tab
at http://localhost:63193/js/angular/angular.js:63:12
at parentSet (http://localhost:63193/js/angular/angular.js:7585:25)
at parentValueWatch (http://localhost:63193/js/angular/angular.js:7598:23)
at Object.regularInterceptedExpression (http://localhost:63193/js/angular/angular.js:12738:16)
at Scope.$digest (http://localhost:63193/js/angular/angular.js:14125:40)
at Scope.$apply (http://localhost:63193/js/angular/angular.js:14395:24)
at HTMLAnchorElement.<anonymous> (http://localhost:63193/js/angular/angular.js:22827:23)
at HTMLAnchorElement.n.event.dispatch (http://localhost:63193/js/jquery.min.js:3:8066)
at HTMLAnchorElement.r.handle (http://localhost:63193/js/jquery.min.js:3:4774)

Answer 1

您可以使用參數鏈接到特定標簽，例如：

<a href="somepage?tab=email">Link to Video Email Visit Tab</a>

然后，在控制器中，您可以使用一個對象來保存每個選項卡的狀態：

$scope.tabStates = {};
$scope.tabStates[$location.search().tab || 'online'] = true; //Include default as fallback

對於每個選項卡，您都包含一個active表達式，例如：

<tabset justified="true">
     <tab heading="Online Visit" active="tabStates['online']">
        <p>
            Like many other uses of the Internet these days, online visit saves you time by allowing you to receive care.
        </p>
     </tab>

     <tab heading="Video Email Visit" active="tabStates['email']">
          <p>
             Meet with your doctor online and get treated for almost any health issue, as long as it isn't a medical emergency.
          </p>
     </tab>
</tabset>

不要忘記將$location注入控制器。

當然，您也可以對選項卡使用路由參數來獲取網址，例如yourpage/online工作方式與使用$routeParams而不是$location方式大致相同。