1

我使用 angularjs 1.5 组件路由器创建了应用程序，如何让父组件将值传递给内部的子组件，并且子组件将回调绑定到父组件，例如：

应用程序.js

   angular.module('newsApp',['ngComponentRouter'])
            .config(['$locationProvider', function($locationProvider) {
                $locationProvider.html5Mode(true);
            }])
            .value('$routerRootComponent', 'myNews')

组件.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],
    })

我的新闻.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>

最新消息.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 时，我想（发送到或更改） myNews组件中的类别值

当在输入框中使用类型时，我需要将此值传递给另一个组件

4

0 回答 0