angular 1.5组件路由器传递组件之间的值或回调

时间:2016-06-06 20:22:08

标签: javascript angularjs angular-component-router

我使用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时,我需要将此值传递给另一个组件

0 个答案:

没有答案