コンポーネントルータのバインディング - 角度1.5

Question

私はComponent Routerでバインドするのに苦労しています。

開発者ガイドでは、コンポーネントで$ scopeを使用しないでください。したがって、オブジェクトはバインディングを通過する必要があります。

の例に基づいて：

HTML：：

<div ng-app="app" ng-controller="MainCtrl as ctrl"> 
    {{ ctrl.hero.name }} 
    <app></app> 
</div> 

Javascriptを： https://docs.angularjs.org/guide/componentとhttps://docs.angularjs.org/guide/component-router私が思い付いた

'use strict'; 

var app = angular.module('app', [ 
    'ngComponentRouter', 
    'testComponent', 
]) 

.config(function($locationProvider) { 
    $locationProvider.html5Mode(true); 
}) 

.value('$routerRootComponent', 'app') 

.controller('MainCtrl', function(){ 
    this.hero = { 
     name: 'Spawn' 
    }; 
}) 

.component('app', { 
    template: '<ng-outlet></ng-outlet>', 
    $routeConfig: [ 
     {path: '/test', name: 'Test', component: 'testComponent'}, 
    ], 
}) 

var testComponent = angular.module('testComponent', []); 

testComponent.component('testComponent', { 
    template: '<span>Name: {{$ctrl.hero.name}}</span>', 
    controller: TestComponentController, 
    bindings: { 
     hero: '=', 
    } 
}); 

function TestComponentController() { 
} 

しかし、 "スポーン" を<span>Name: {{$ctrl.hero.name}}</span>表示されませんか何でも

Answer 1

ルータコンポーネントで「バインディング」定義を使用することはできません。これは、コンポーネントが制御するHTMLを使用しないためです。

ルーティングコンポーネントにデータを渡す必要がある場合は、$ routerOnActivateコールバックのルーティングパラメータにアクセスします。

https://docs.angularjs.org/guide/component-router

サンプル・コードここに始めるために：https://github.com/brandonroberts/angularjs-component-router/

Answer 2

あなたはまだこれを必要とする場合は、HTML enter <div ng-app="app" ng-controller="MainCtrl as ctrl"> {{ ctrl.hero.name }} <app hero="ctrl.hero.name"></app> </div> する必要がありますし、あなたの私が思うの結合が bindings: { hero: '<' }