[英]ng-Click affects to different controller
我正在使用angularjs UI引導程序來制作選項卡。 我在導航欄中有可切換到不同選項卡的按鈕。 帶有自己的控制器的navbar嵌套在主控制器內。 我也想知道如何在導航欄切換選項卡中創建按鈕。
我在這里或下面的HTML和JS
<div ng-controller="TabsDemoCtrl">
<header>
<div ng-controller="navbarcontroller">
<div class="navbar-header">
<a class="navbar-brand" >Brand
</a>
</div>
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
<ul class="nav navbar-nav navbar-right" style="pointer-events: auto;">
<li>
<!-- this buttons dosnt works -->
<button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select 1st tab</button>
<button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select 2nd tab</button>
</li>
</ul>
</div>
</div>
</header>
<p> ----- navbar controller ends here ----- </p>
<hr>
<p> ---- tab controller starts here ------ </p>
<!-- this buttons works -->
<button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select 1st tab</button>
<button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select 2nd tab</button>
<uib-tabset active="active">
<uib-tab index="1" heading="Tab1" >
Content 1
</uib-tab>
<uib-tab index="2" heading="Tab1" >
Content 2
</uib-tab>
</uib-tabset>
</div>
這是js文件
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo')
.controller('TabsDemoCtrl', function ($scope, $window) {
})
.controller('navbarcontroller', function ($scope, $window) {
});
您必須在兩個控制器之間共享 active
屬性 。 為此,我們需要進行一些更改。
1-您必須實現一個服務(我們將其tabSelector
),如下所示:
.service('tabSelector', function(){
});
2-現在,在TabsDemoCtrl
和navbarcontroller
您都需要使用先前創建的服務,並實現兩個使用tabSelector
服務的功能,如下所示:
//this should be done with 'TabsDemoCtrl' and 'navbarcontroller' (this last one was omitted for brevity)
.controller('TabsDemoCtrl', function ($scope, $window, tabSelector) {
//set the active tab
$scope.selectTab = function(tab){
tabSelector.active = tab;
}
//keep synced the active tab
$scope.getActive = function(){
return tabSelector.active;
}
})
3-您認為:
ng-clik
( active = 1
)的內容: selectTab(1)
(控制器中的功能)。 請注意,您必須將1
替換為適當的值。 <uib-tabset active="active">
的<uib-tabset active="getActive()">
請參考此工作示例 (您的punker分叉了)
您可以在此處找到一些相關信息:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.