【发布时间】:2013-07-08 11:56:40
【问题描述】:
我正在使用 Angularjs。 我正在使用 Tabs 和手风琴指令。 When tab's disabled and active properties are set to true, tab's content is not showing up. 这是重现该问题的my plunker snippet。单击 PL 项目并单击模式 1。模式选项卡将变为活动状态,但未显示。 我有一种直觉,这是由于 ng-include 造成的,但不明白为什么......
Index.html
<div ng-controller="LeftPaneCtrl">
<tabset>
<tab ng-repeat="tab in leftPane.tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
<div ng-include="tab.content"></div>
</tab>
</tabset>
</div>
</body>
Modules.Html:
<accordion close-others="true">
<accordion-group heading="{{module.displayName}}" ng-repeat="module in leftPane.modules">
<div ng-repeat="mode in module.modes" >
<a style="color: green" ng-click="leftPane.selectMode(module, mode)">{{mode.title}} </a>
</div>
</accordion-group>
</accordion>
Srcipt.js:
function LeftPaneModel() {
this.tabs = [
{ title: "Modules", content: "Modules.html", active: true},
{ title: "Modes", content: "Modes.html", disabled: true, active: false },
{ title: "Reports", content: "Reports.html", disabled: true, active: false }
];
this.modulesTab = this.tabs[0];
this.modesTab = this.tabs[1];
this.reportsTab = this.tabs[2];
this.modules = [];
this.modules.push({displayName:'PL',modes:[{title:'Mode 1',id:'Mode1'},{title:'Mode 2',id:'Mode2'}]})
this.selectMode = function(module, mode) {
var tab = this.modesTab;
tab.title = mode.title;
tab.active = true;
tab.disabled = false;
};
}
var emsApp = angular.module('EmsWeb', ['ui.bootstrap']);
emsApp.controller('LeftPaneCtrl', ['$scope',function($scope) {
$scope.leftPane = new LeftPaneModel();
}]);
感谢任何想法。
【问题讨论】: