用于UI引导选项卡的AngularJS指令(隔离范围问题)
我正试图制定一个指令来使用角度UI引导选项卡。用于UI引导选项卡的AngularJS指令(隔离范围问题),angularjs,angular-ui-bootstrap,isolate-scope,angular-ui-bootstrap-tab,Angularjs,Angular Ui Bootstrap,Isolate Scope,Angular Ui Bootstrap Tab,我正试图制定一个指令来使用角度UI引导选项卡。 本指令的主要目的是记住已选择的选项卡。 我查看了所有的解决方案,没有一个解决了控制器中未设置选项卡的问题: <tabset> <tab heading="Customers" sctab>Customer tab content</tab> <tab heading="Sales" sctab>Sales Tab Content</tab> </tabset> 因此,
本指令的主要目的是记住已选择的选项卡。
我查看了所有的解决方案,没有一个解决了控制器中未设置选项卡的问题:
<tabset>
<tab heading="Customers" sctab>Customer tab content</tab>
<tab heading="Sales" sctab>Sales Tab Content</tab>
</tabset>
因此,基本上在这里,我一直在尝试为选项卡设置active=true,以尝试激活选项卡(无效)。在深入讨论更多细节之前,我将在这里停下来,看看是否有人根据我的尝试提出了一些想法。
这是我的指示:
angular.module('jonsmodule')
.directive('sctab', ['$rootScope', '$state', '$location', function($rootScope, $state, $location) {
return {
restrict: "A",
link: function (scope, element, attrs) {
/**
* INITIALIZING THE ACTIVE TAB FROM HASH
*/
scope.$watch(
// watch for setting of the element heading (so we know when the bootstrap tabs are loaded)
function () { return element.children().first('p')[0].innerText; },
function (newValue, oldValue) {
// when ui-bootstrap tabs loaded
if (newValue !== oldValue) {
// if hash matches the tab heading name
if ($location.hash() == newValue.trim()) {
/**
* ******** NEED HELP HERE ************
* THE GOAL HERE IS TO SET THE TAB ACTIVE
* it does not work completely
* below is a list of things I tried
*/
//$(element).tab('show'); // .tab is not a function
$(element).addClass('active'); // changes the class but the tab will not change
scope.$$childHead.active = true; // appears to not save
// attrs.$set('ngClass', {active: true, disabled: false}); // this does not appear to change anything
} else {
scope.$$childHead.active = false; // appears to save and the first tab is not selected
}
}
}
);
/**
* CHANGING THE TAB
*/
// get the state (controller)
var current_state = $state.current.name;
// on tab change set the hash
element.on('click', function () {
var tabLabel = element.children().first('p')[0].innerText;
history.pushState(null, null, current_state + '#' + tabLabel);
});
},
};
}]);
尝试在选项卡本身中设置选项卡的活动状态,并将其指向范围值。例如:
<tab select="tabSelected('tab1')" active="tabs.tab1">
<tab select="tabSelected('tab2')" active="tabs.tab2">
$scope.tabs = {tab1: false, tab2:false};
$scope.tabSelected = function (whichTab) {
$scope.currentTab = whichTab;
};
function setTabDisplayed() {
$scope.tabs[$scope.currentTab] = true;
}
$scope.tabs={tab1:false,tab2:false};
$scope.tabSelected=函数(whichTab){
$scope.currentTab=whichTab;
};
函数setTabDisplayed(){
$scope.tabs[$scope.currentTab]=true;
}
感谢您的回复。我可以走这条路,但重点是制定指令,这样我只需要做一次,而不必更新我们平台的每个页面/控制器。我实际上是在指示中指出你应该这样做。
<tab select="tabSelected('tab1')" active="tabs.tab1">
<tab select="tabSelected('tab2')" active="tabs.tab2">
$scope.tabs = {tab1: false, tab2:false};
$scope.tabSelected = function (whichTab) {
$scope.currentTab = whichTab;
};
function setTabDisplayed() {
$scope.tabs[$scope.currentTab] = true;
}