我在不使用服务的情况下无法在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 :(
答案 0 :(得分:0)
在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});
}
有关更多信息,请参见