组件路由器中的绑定-Angular 1.5

Question

I'm struggling with binding in Component Router.

It is said in the Developer's Guide you should avoid using $scope in components therefore objects have to be passed through binding.

Based on examples in: https://docs.angularjs.org/guide/component and https://docs.angularjs.org/guide/component-router I came up with:

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() {
}

But <span>Name: {{$ctrl.hero.name}}</span> doesn't show "Spawn" or anything.

Answer 1

You cannot use the "bindings" definition in router components as the component doesn't have any HTML use that you would control.

If you need to pass in data to the routing component you would access routing parameters in the $routerOnActivate callback.

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

Sample code to get started here: https://github.com/brandonroberts/angularjs-component-router/

Answer 2

I don't think there is a good solution for that yet in the ngComponentRouter for angular 1.x. Since it's still under active development, I am hopeful that a better solution will arise in the next iterations.

In the meantime, what I do is that I make the component depends on its parent via require.

EDIT: I understand now that you want to keep MainCtrl as the top controller, so I have edited the code:

.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
  }
}

And then html should then be:

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

See working codepen: http://codepen.io/bchazalet/pen/qZYzXM?editors=1111

It's not ideal, because it introduces a dependency (in your case from testComponent to app) but it works.

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: '<' }