如何链接到特定的Angular-ui静态选项卡

texas697 发表于 Dev

德州697

我需要链接到另一个视图上的特定选项卡。我一直在研究，但是我不确定最简单的方法是什么。我正在使用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)

马塞尔·格沃德（Marcel Gwerder）

您可以使用参数链接到特定标签，例如：

<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控制器。

当然，您也可以对选项卡使用route参数来获取类似yourpage/online工作方式的url，$routeParams而使用代替的方式大致相同$location。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。