Как связываться между директивами/компонентами родственного языка в угловом формате 1.5

Question

Каков наилучший способ связи между угловыми компонентами и/или директивами. Я использую угловой материал. Я использую ui-router.

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

Я хотел бы реорганизовать, где это необходимо, мои директивы в .component().

У меня есть навигатор, который я разделил в директиву (navBar). В этой навигационной панели у меня есть панель поиска, которую я хотел бы отфильтровать список. Список указан в директиве sibling.

Первоначально у меня была директива navbar (и пыталась использовать ее как .compontent()) вне области MainCtrl, как определено ui-router. Мне это показалось, что навигатор будет относительно последовательным во всем приложении.

Я отложил его, чтобы поместить его в область MainCtrl, где я могу привязать свойства MainCtrl к элементам в моей директиве navBar. Это кажется неправильным, поскольку теперь navBar и fileBrowser связаны с MainCtrl.

Другие варианты я смотрел в:

Использование и область применения $ часы(), чтобы определить свойства на родительском компоненте из компонента NavBar ребенка.. Затем в другом дочернем компоненте fileBrowser, используя scope. $ Watch(), следите за этими изменениями в родительском компоненте и отвечайте соответствующим образом.

Использование службы для хранения данных и передачи данных.

Использование $ emit, $ broadcast events.

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

Это состояние инициируется Ui-маршрутизатором

main.component.js

angular.module('glossa') 
    .component('mainComponent', { 
     controller: MainCtrl, 
     controllerAs: 'vm', 
     transclude: true, 
     templateUrl: 'app/main/main.html' 
    }); 

function MainCtrl($scope, nodeSrvc, fileSrvc) { 
    var vm = this; 

    vm.selectedFile = {}; 
    vm.fileList = []; 
    vm.searchText = ''; 
    vm.filteredFiles = []; 

    activate(); 

    function activate() { 
     buildFileList(); 
    } 

    /** 
    * Queries for all files in db. 
    */ 
    function buildFileList() { 
     fileSrvc.queryAllFiles().then(function(docs) { 
      vm.fileList = docs; 
     }); 
    } 
} 

main.html

//where the input where I filter the list 
<navbar-directive></navbar-directive> 

<div flex layout="row" > 
    //where the list is located 
    <file-browser layout="column"></file-browser> 
    <tabbar></tabbar> 
</div> 

<drawer-directive></drawer-directive> 

Я хотел Navbar, чтобы отфильтровать список расположенный в директиве sibling или компоненте filebrowser

navbar.directive.js

angular.module('glossa') 
    .directive('navbarDirective', navBarDirective); 

function navBarDirective(fileSrvc) { 
    var directive = { 
     restrict: 'E', 
     replace: true, 
     controller: NavbarCtrl, 
     controllerAs: 'navVm', 
     templateUrl: 'components/navbar/navbar.html', 
     bindToController: true 
    }; 
    return directive; 
} 

navbar.html

<md-toolbar 
     layout="row" 
     class="nav-content primary-bg" 
     md-whiteframe="1" 
     md-selected-nav-item="currentNavItem" 
     nav-bar-aria-label="navigation links"> 
    <span flex></span> 
    <div class="md-toolbar-tools"> 
     <md-input-container md-no-float flex > 
      <form ng-submit="vm.searchSubmit()"> 
       <input ng-model="vm.searchText" placeholder="Search..."> 
      </form> 
     </md-input-container> 
    </div> 
</md-toolbar> 

Это где список, который я хотел бы, чтобы отфильтровывать расположен.

filebrowser.JS

angular.module('glossa') 
    .directive('fileBrowser', fileBrowser); 

function fileBrowser() { 
    var directive = { 
     restrict: 'E', 
     templateUrl: 'components/filebrowser/filebrowser.html' 
    }; 
    return directive; 
} 

filebrowser.html

<md-sidenav 
     md-component-id="left" 
     md-is-locked-open="true" 
     layout="column"> 
    <md-content> 
     <md-list flex> 
      <md-list-item ng-repeat="file in vm.filteredFiles = (vm.fileList | filter: vm.searchText)" class="md-2-line"> 
       <md-item-content md-ink-ripple layout="row" layout-align="start center"> 
        <div class="md-list-item-text" layout="column"> 
         <h3>{{file.name}}</h3> 
         <p>Preview of first few lines of a baseline</p> 
        </div> 
       </md-item-content> 
      </md-list-item> 
     </md-list> 
    </md-content> 
</md-sidenav> 

Answer 1

Общаться компоненты одноуровневых, устанавливаемой на станке с помощью двунаправленной связывания:

angular.module('glossa') 
    .directive('navbarDirective', navBarDirective); 

function navBarDirective(fileSrvc) { 
    var directive = { 
     //Use bi-directional binding 
     scope: { 
      searchText: '=' 
     }, 
     restrict: 'E', 
     replace: true, 
     controller: NavbarCtrl, 
     controllerAs: 'navVm', 
     templateUrl: 'components/navbar/navbar.html', 
     bindToController: true 
    }; 
    return directive; 
} 

HTML

<nav-bar-directive search-text="main.searchText"> 
</nav-bar-directive> 

<sibling-component search-text="main.searchText"> 
</sibling-component>