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

时间:2014-12-27 19:29:18

标签: angularjs angular-ui-bootstrap

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

 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)

1 个答案:

答案 0 :(得分: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的方式大致相同。