Connect мои флажков с динамическими закладками

Я создал список с некоторыми элементами и флажок для каждого элемента, как, например:Connect мои флажков с динамическими закладками

<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}, 
    ]; 
...

И внутри здесь у меня есть функция, которая позволяет мне действовать всякий раз, когда изменяется один из флажков.

Что я надеялся сделать, это добавить динамические вкладки, которые появятся, когда элемент будет выбран и исчезнет в противном случае.

Я попытался добавить вкладки, как показано на сайте углового материала, и сохранил код javascript в файле с именем tabs.js.

Моя проблема заключается в том, что функция создания вкладок находится в tabs.js, а функция, которая реагирует при изменении флажка, находится внутри list.js и, следовательно, в разных контроллерах.

Как я могу подключить эти две функции, или если это не выполнимо или целесообразно, то каким будет лучший способ для достижения того, чего я хочу?

EDIT1

Here является то, что я пытаюсь сделать без tabs.js, что я хочу, чтобы интегрировать.

источник

2015-07-31 dearn44

Вы можете использовать $ rootScope –

Можете ли вы дать ссылку на определенный угловой участок, с которого вы загрузили код tabs.js? Можете ли вы изменить этот код или используете его как библиотечную функцию? Если это так, вы можете, например, просто опубликовать конкретные методы, используя $ scope, использовать события, наблюдателей и т. Д. В зависимости от ситуации. – mpasko256

@ leo.fcx Я не мог найти много на rootScope, и просто называя это порождает ошибку. У вас есть пример для этого? – dearn44

Вы можете использовать Services для совместного использования данных между контроллерами. См.: https://docs.angularjs.org/guide/services

Просмотреть этот фрагмент кода, который добавляет/удаляет вкладки в зависимости от того, установлен ли соответствующий флажок. Я использую dataSrvc для обмена данных между listCtrl и tabsCtrl

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

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

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

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

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

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

.ma-tabs { 
 
\t width: 400px; 
 
} 
 

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

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
\t <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css"> 
 
\t <link rel="stylesheet" href="main.css"> 
 
\t <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"> 
 
\t <section ng-controller="listCtrl"> 
 
\t \t <div ng-repeat="item in items"> 
 
\t \t \t <md-checkbox ng-checked="item.selected" ng-click="toggle(item)"> 
 
\t \t \t \t {{ item.id }} 
 
\t \t \t </md-checkbox> 
 
\t \t </div> 
 
\t </section> 
 

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

источник

2015-08-01 17:03:40

Очень интересный ответ, особенно для успешного объяснения мне, какие услуги есть. – dearn44

Рад помочь вам :) –

Прежде всего, вы должны позаботиться, чтобы приложить все Controlers к тому же модулю

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

Как я могу видеть в вашем коде, ListCtrl выше уровень в угловой иерархии контроллеров, чем контроллер для вкладок (я признаю он просматривает html-код). Итак, все, что попало в область в ListCtrl, будет видно в нижних контроллерах.

Если бы я был на вашем месте, я бы создать пустой объект JS {} в рамках ListCtrl

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

, а затем приложите необходимые методы управления вкладками.

источник

2015-07-31 14:35:37 mpasko256

Я попытаюсь применить ваши предложения и вернуться к вам, надеюсь, когда Я сделала это. Благодарю. – dearn44

Имеет ли ваше второе предположение, что я должен отказаться от моего кода tabs.js и объединить его функции с моим ListCtrl, так что все под одним контроллером? – dearn44

Нет, я предлагаю публиковать методы из tabs.js способом, видимым в ListCtrl. Код все еще может быть в двух разных контроллерах. См. Http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-models-between-nested-controllers.html – mpasko256

Connect мои флажков с динамическими закладками

ответ

Смежные вопросы