ng-Click 影响不同的控制器

Question

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

我很高兴here 或 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) {

});

Answer 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">的内容为<uib-tabset active="getActive()">

请参考this working example（你的笨蛋分叉）

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

Share data between AngularJS controllers
Passing data between controllers in Angular JS?
How to share data between controllers in angularjs
Sharing data between controllers in AngularJS

ng-Click 影响不同的控制器

ng-Click affects to different controller

html

angularjs

angular-ui-bootstrap

angular-ui-bootstrap-tab