0

我正在使用 angularjs UI bootstrap 来制作标签。我在导航栏中有可以切换到不同选项卡的按钮。带有自己控制器的导航栏嵌套在主控制器内。我也想知道如何在导航栏切换选项卡中制作按钮。

我这里有一个 plunk 或者下面有 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) {

});
4

1 回答 1

1

您必须在两个控制器之间共享您的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">以及for的内容<uib-tabset active="getActive()">

请参考这个工作示例（你的 plunker 分叉）

你可以在这里找到一些相关信息：

  1. 在 AngularJS 控制器之间共享数据
  2. 在Angular JS中的控制器之间传递数据？
  3. 如何在angularjs中的控制器之间共享数据
  4. 在 AngularJS 中的控制器之间共享数据
于 2017-04-11T21:16:44.390 回答