Question

我在不使用服务的情况下无法在angularJS中链接两个兄弟组件。我看到了示例，但无法使它们正常工作。这就是我所拥有的。我在做什么？谢谢！

cluster.js

<div class="row">
    <filter-component></filter-component>
    <result-component filters="$ctrl.filters"></result-component>
</div>

filter.component.js

'use strict';
    angular
        .module('filter' , ['ui.bootstrap'])
        .component('filterComponent', {
            bindings: {},
            templateUrl : 'app/filter/filter.html',
            controller : filterCtrl
        })


        function filterCtrl($scope){
            this.filters = 'FILTRO' // <-- I give it a value
        }

results.component.js

(function(){
    'use strict';
        angular
            .module('result')
            .component('resultComponent', {
                bindings: {
                    filters :'<' // <-- inject
                },
                templateUrl : 'app/result/result.html',
                controller : resultCtrl
            })


            function resultCtrl($scope) {}

result.html

<h1>{{$ctrl.filters}}</h1> //<-- nothing is shown :(

Answer 1

在HTML中使用具有表达式绑定的属性：

<div class="row">
    <filter-component on-update="$ctrl.filters=$filters">
    </filter-component>
    <result-component filters="$ctrl.filters">
    </result-component>
</div>

对&中的<filter-component>使用表达式绑定：

app.component('filterComponent', {
    bindings: {onUpdate: "&"},
    templateUrl : 'app/filter/filter.html',
    controller : filterCtrl
})

function filterCtrl() {
    this.filters = 'FILTRO' // <-- I give it a value
    this.onUpdate({$filters: this.filters});
}

有关更多信息，请参见

在AngularJS中的组件之间传递数据

1 个答案: