Question

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

 // inner joining
 if(provider == null) provider = providerService.join(ProviderService_.provider);
 predicates.add(provider.in(providers));

我的控制器位于名为 list.js 的文件中：

    <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>

在这里，我有一个功能，只要其中一个复选框显示更改，我就可以执行操作。

我希望做的是添加动态标签，这些标签会在选择项目时显示，否则会消失。

我尝试添加角度素材网站中显示的标签，并将javascript代码保存在名为 tabs.js 的文件中。

我的问题是制表符创建功能在tabs.js中，当复选框被更改时作出反应的函数在list.js中，因此在不同的控制器中。

如何连接这两个功能，或者如果这是不可行或不可取的，那么对我来说最好的方法是实现我想要的？

EDIT1

如果没有我要集成的tabs.js，

Here就是我要做的。

Answer 1

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

请参阅此代码段，根据是否选中相应的复选框，添加/删除标签。我使用dataSrvc在listCtrl和tabsCtrl

之间共享数据

＆＃13;

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;
}]);

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

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

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

正如我在代码中看到的，ListCtrl在角度控制器层次结构中的级别高于选项卡的控制器（我认为它可以查看html代码）。因此，放入ListCtrl中的范围的所有内容都将在较低的控制器中可见。

如果我在你的位置，我会在ListCtrl范围

中创建一个空的JS对象{}

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

然后在标签控制器中附加所需的方法。

将我的复选框与动态标签相关联

2 个答案: