Связывание в компонентном маршрутизаторе - угловой 1.5

Question

Я борюсь с привязкой в ​​компонентном маршрутизаторе.

В Руководстве разработчика сказано, что следует избегать использования $scope в компонентах, поэтому объекты должны передаваться через связывание.

Основываясь на примерах: https://docs.angularjs.org/guide/component и https://docs.angularjs.org/guide/component-router я придумал:

HTML:

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

Javascript:

'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> не показывает "Spawn" или что-нибудь.

Answer 1

Вы не можете использовать определение "привязок" в компонентах маршрутизатора, так как компонент не использует HTML, который вы бы контролировали.

Если вам нужно передать данные в компонент маршрутизации, вы получите доступ к параметрам маршрутизации в обратном вызове $routerOnActivate.

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

Пример кода для начала работы здесь: https://github.com/brandonroberts/angularjs-component-router/

Answer 2

Я не думаю, что есть хорошее решение для этого в ngComponentRouter для угловых 1.x. Поскольку он все еще находится в активной разработке, я надеюсь, что лучшее решение будет найдено в следующих итерациях.

В то же время я делаю так, чтобы компонент зависел от его родителя с помощью require.

РЕДАКТИРОВАТЬ: Теперь я понимаю, что вы хотите сохранить MainCtrl в качестве верхнего контроллера, поэтому я отредактировал код:

.component('app', {
    template: '<ng-outlet></ng-outlet>',
    bindings: {
      hero: '<' // we have to bind here since you want to pass it from MainCtrl
    },
    $routeConfig: [
        {path: '/test', name: 'Test', component: 'testComponent'}
    ],
})

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

testComponent.component('testComponent', {
    template: '<span>Name: {{$ctrl.hero.name}}</span>',
    controller: TestComponentController,
    require: {
        appCtrl: '^app',
    }
});
function TestComponentController() {
  var ctrl = this;
  ctrl.$onInit = function(){
    ctrl.hero = ctrl.appCtrl.hero
  }
}

И тогда HTML должен быть:

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

Смотри рабочий код: http://codepen.io/bchazalet/pen/qZYzXM?editors=1111

Это не идеал, потому что он вводит зависимость (в вашем случае от testComponent до приложения), но он работает.

Answer 3

Если вам все еще это нужно, то привязка работает с html attr, так что html должен быть enter <div ng-app="app" ng-controller="MainCtrl as ctrl"> {{ ctrl.hero.name }} <app hero="ctrl.hero.name"></app> </div> и твоя привязка, я думаю, должна быть bindings: { hero: '<' }