0

angular 1.5 兄弟コンポーネントおよび/またはディレクティブ間で通信する最良の方法は何ですか? 角材を使用しています。私はui-routerを使用しています。

コンポーネントとディレクティブを分離し、相互に依存しないようにしています。

必要に応じて、ディレクティブを .component() モジュールにリファクタリングしたいと思います。

ディレクティブ (navBar) に分離したナビゲーション バーがあります。そのナビゲーションバーには、リストをフィルタリングしたい検索バーがあります。リストは兄弟ディレクティブにあります。

もともと、ui-router で定義されている MainCtrl の範囲外に navbar ディレクティブがありました (そして、それを .component() として使用しようとしました)。ナビゲーションバーはアプリケーション全体で比較的一貫しているため、これは私には理にかなっているように思えました。

MainCtrl のスコープ内に配置することを延期し、MainCtrl のプロパティを navBar ディレクティブの要素にバインドできるようにしました。navBar と fileBrowser が MainCtrl と結合されているため、これは間違っているようです。

私が調べていた他のオプション：

および scope.$watch() を使用して、子コンポーネントの navBar から親コンポーネントのプロパティを定義します。次に、もう一方の子コンポーネントである fileBrowser で、scope.$watch() を使用して親コンポーネントでのこれらの変更を監視し、それに応じて応答します。

サービスを使用してデータを保存し、データを渡す。

$emit、$broadcast イベントの使用。

この状況でディレクティブ/コンポーネントを分離しておくための最善の解決策は何ですか? 兄弟ディレクティブ/コンポーネント間で通信するための最良/最もクリーン/推奨される方法は何ですか?

この状態は ui-router によって開始されます

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 でフィルタリングしたい

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

1 に答える 1

1

berween 兄弟コンポーネントと通信するには、双方向バインディングを使用します。

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>
于 2016-10-24T17:32:43.103 に答える