在这里我创建了Sample For Tabs 。
我真正需要的是在示例 Controller 中手动设置我需要根据配置参数设置选定的选项卡。在加载时,我需要手动设置要选择的选项卡(基于 tabid 也可以)。我需要 Controller 内的此功能。任何人都可以帮助我吗
angular.module('components', []).
directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: [ "$scope", function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
}
}],
template:
'<div class="tabbable">' +
'<ul class="nav nav-tabs">' +
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
'<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
'</li>' +
'</ul>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
replace: true
};
}).
directive('pane', function() {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
'</div>',
replace: true
};
})
.controller('sample', function($scope){
//Here I need to Change Selected Tab
})
最佳答案
Try this它会解决你的问题
将指令范围用作
scope: {
selected : '='
},
从 View 传递值
<tabs data-selected="3">
然后在您的指令 addPane funstion 中为
this.addPane = function(pane) {
if (panes.length == $scope.selected) $scope.select(pane);
panes.push(pane);
}
如果您将范围变量设置为,则可以从 Controller 配置它
controller('sample', function($scope){
$scope.selectedTab = 3;
}
公开此变量以查看
<tabs data-selected="selectedTab">
如果您希望它带有pan id,则在pane指令上使用作用域变量
scope: { title: '@', id:'=' },
并将您的 addPane 方法更新为
this.addPane = function(pane) {
if (pane.id == $scope.selected) $scope.select(pane);
panes.push(pane);
}
还在您的 Pane 上放置一些 ID 作为
<pane id="1" title="First Tab">
关于javascript - 如何在 angularjs 中更改 Controller 内的选定选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35448784/