[英]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.