我使用angularjs 1.5组件路由器创建了应用程序,我怎么能让父组件将值传递给子组件里面,子组件将回调绑定到父组件,如:
app.js
angular.module('newsApp',['ngComponentRouter'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}])
.value('$routerRootComponent', 'myNews')
components.js
angular.module('newsApp')
.component('myNews', {
templateUrl: '/myNews.html',
controller: ['newsFactory',ShamraNewsCtrl],
$routeConfig: [
{path: '/', name: 'MyLatestNews', component: 'myLatestNews', useAsDefault: true},
{path: '/:category', name: 'MyNewsList', component: 'myNewsList'},
]
}).component('myLatestNews', {
templateUrl: '/latestNews.html',
controller: ['newsFactory', myLatestNewsCtrl],
}).component('myNewsList', {
templateUrl: '/newsList.html',
controller: ['newsFactory', myNewsListCtrl],
})
myNews.html
<div class="input-group">
<input type="text" class="form-control" ng-bind="$ctrl.query" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn search-btn btn-success" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<div>
<div class="sh-news-cat list-group">
<a ng-repeat="(key, catVal) in $ctrl.categories" class="list-group-item" ng-class="{active:$ctrl.select.selected == key}" ng-link="['MyNewsList', {category: key}]">
{{ catVal}}
<span ng-show="$ctrl.selected.spinner == key"><i class="fa-lg fa fa-spinner fa-spin"></i></span>
</a>
</div>
</div>
<div>
<ng-outlet></ng-outlet>
</div>
latestNews.html
<div class="last-news-container">
<div class="latest-news" ng-repeat="(key, newsList) in $ctrl.latestNews">
<h3 class="section-title">
{{ newsList.title}}
</h3>
<hr>
<div class="section-body">
<div class="news-item" ng-repeat="sectionList in newsList.result">
<div class="news-info">
<h3>{{ sectionList.title }}</h3>
<p>{{ sectionList.content }}</p>
</div>
</div>
</div>
<div class="more-news">
<a ng-link="['MyNewsList', {category: key}]" ng-hide="$ctrl.seemore"> see more ... </a>
</div>
</div>
</div>
所以当我点击latestNews.html中的seeMore时,我希望(发送到OR更改) myNews 组件中的类别值
当在输入框中使用type时,我需要将此值传递给另一个组件