将我的复选框与动态选项卡连接起来

Question

我创建了一个列表，其中包含一些项目和每个项目的复选框，如下所示：

    <md-list ng-controller="ListCtrl" class="listControls">

    <md-list-item ng-repeat="account in accounts">
    <md-checkbox ng-model="account.selected" ng-checked="selection.indexOf(account.title) > -1" ng-click="toggleSelection(account.title)"></md-checkbox>
    <p>{{account.title}}</p>        
    </md-list-item>

    </md-list>

我的控制器位于名为 list.js:

的文件中

angular.module('MyApp')
.config(function($mdThemingProvider, $mdIconProvider){
    $mdIconProvider
        .defaultIconSet('img/icons/sets/core-icons.svg', 24);

    $mdThemingProvider.theme('default')
        .primaryPalette('red')
        .accentPalette('red');
    })

.controller('ListCtrl', function($scope, $mdDialog) {
  $scope.accounts = [
    {id: 1, title: "Account A", selected: false},
    {id: 2, title: "Account B", selected: false},
    {id: 3, title: "Account C", selected: false},
  ];
...

在这里我有一个功能，可以让我在其中一个复选框状态发生变化时采取行动。

我希望做的是添加动态选项卡，这些选项卡会在选择项目时出现，否则会消失。

我尝试添加在 angular material 站点中看到的选项卡，并将 javascript 代码保存在名为 tabs.js 的文件中。

我的问题是选项卡创建函数在 tabs.js 中，当复选框更改时做出反应的函数在 list.js 中，因此在不同的控制器中。

我如何连接这两个功能，或者如果这不可行或不可取，那么实现我想要的目标的最佳方法是什么？

EDIT1

Here 是我在没有要集成的 tabs.js 的情况下尝试做的事情。

Answer 1

首先，您应该注意将所有控制器附加到同一个模块

angular.module('yourModuleName', ...)

正如我在您的代码中看到的那样，ListCtrl 在 angular 控制器层次结构中的级别高于选项卡的控制器（我在查看 html 代码时认出它）。因此，在 ListCtrl 中放入范围的所有内容都将在下层控制器中可见。

如果我处在你的位置，我会在 ListCtrl 范围内创建一个空的 JS 对象 {}

.controller('ListCtrl', function($scope, $mdDialog) {
    $scope.tabCtrlMethods = {};

然后在选项卡控制器中附加所需的方法。

Answer 2

您可以使用 Services 在控制器之间共享数据。参见：https://docs.angularjs.org/guide/services

查看此代码片段，其中 adds/removes 选项卡基于相应的复选框是否被选中。我正在使用 dataSrvc 在 listCtrl 和 tabsCtrl

之间共享数据

angular.module('materialApp', ['ngMaterial', 'ngAnimate'])

.service('dataSrvc', [function() {
 var tabData = {
  tabs: [
   {
    'id': 1,
    'label': 'One',
    'selected': true
   },
   {
    'id': 2,
    'label': 'Two',
    'selected': true
   },
   {
    'id': 3,
    'label': 'Three',
    'selected': true
   },
   {
    'id': 4,
    'label': 'Four',
    'selected': true
   },
  ]
 };
 return tabData;
}])

.controller('listCtrl', ['$scope', 'dataSrvc', function($scope, dataSrvc) {
 $scope.items = dataSrvc.tabs;

 $scope.exists = function(item) {
  return $scope.items.indexOf(item) > -1;
 };

 $scope.toggle = function(item) {
  item.selected = !item.selected;
 };
}])

.controller('tabsCtrl', ['$scope', 'dataSrvc', function($scope, dataSrvc) {
 $scope.tabs = dataSrvc.tabs;
}]);

.ma-tabs {
 width: 400px;
}

.ma-tab-content {
 margin-top: 20px;
 text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
 <link rel="stylesheet" href="main.css">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body ng-app="materialApp">
 <section ng-controller="listCtrl">
  <div ng-repeat="item in items">
   <md-checkbox ng-checked="item.selected" ng-click="toggle(item)">
    {{ item.id }}
   </md-checkbox>
  </div>
 </section>

 <section ng-controller="tabsCtrl">
  <md-tabs class="ma-tabs">
   <md-tab ng-repeat="tab in tabs"
        ng-if="tab.selected"
     label="{{::tab.label}}">
     <md-content class="ma-tab-content">
      Tab {{::tab.label}} Content
     </md-content>
   </md-tab>
  </md-tabs>
 </section>
</body>
</html>

将我的复选框与动态选项卡连接起来

Connect my checkboxes with dynamic tabs

javascript

angularjs

angular-material