1

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 をクリックすると、 myNewsコンポーネントのカテゴリ値を (送信または変更) したい

入力ボックスでタイプを使用する場合、この値を別のコンポーネントに渡す必要があります

4

0 に答える 0