我正在尝试构建一个选项卡集,该选项卡集将使用bs tabs angularstrap指令和ng repeat在用户操作时动态更改(假设最初的选项卡是a、b、c。在某些用户操作中,它应该更改为x、y、z)
我试图通过在用户操作(比如点击按钮)中将ng repeat指向一个新的数组对象来实现这一点。我注意到出现了一个奇怪的行为,而不是刷新选项卡集
我在这个plnkr中重新创建了它,,请看一看
http://plnkr.co/edit/bpKDx56bieIshKaedzv6?p=preview
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>AngularStrap - Tab directive</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="//mgcrea.github.com/angular-strap/css/prettify.css" rel="stylesheet">
<!-- required libraries -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//mgcrea.github.com/angular-strap/js/angular-strap.js"></script>
<!-- optional libraries -->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.0/fastclick.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div>
</div>
<button type="button" class="btn btn-primary" ng-click="changeTabs()">Show different set of tabs</button>
</body>
</html>
查看代码,选项卡指令似乎会观察活动的选项卡值,并使用transclusion仅刷新选项卡内容,而选项卡标题最初仅分配。我认为常规更改标题的唯一方法是创建一个新指令,该指令以常规方式创建一个tab指令,并用新值初始化它。