AngularJS Связывание между компонентом

Question

Я не очень удобен с привязками в угловом (1.5), каждый раз, когда я пытался, у меня было много проблем для решения моих проблем, поэтому, я думаю, я что-то упустил или что-то сделал не так, и я надеюсь вы можете мне помочь.

Так что это mapping.component.js

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .component('mapping', mapping()); 

    /** @ngInject */ 
    function mapping() { 

    return { 
     templateUrl: 'app/containers/mapping/mapping.html', 
     controller: mappingController, 
     controllerAs: 'mc' 
    }; 

    function mappingController($log, $newDrupal, $stateParams, $http) { 

    var mc = this; 
    var Drupal = new $newDrupal(); 

    mc.paragraph = Drupal.getParagraphs(...); 
    . 
    . 
    . 
    $http.get(...).success(function (data) { 
    } 
    } ... 

rendition.component.js

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .component('rendition', rendition()); 

    /** @ngInject */ 
    function rendition() { 

    return { 
     templateUrl: 'app/components/rendition/rendition.html', 
     controller: renditionController, 
     bindings: { 
     canvasdata: '<', 
     renditions: '<' 
     }, 
     controllerAs: 'rd' 
    }; 

    function renditionController($log, $newDrupal, $stateParams, $http) { 

С mapping.html

<rendition canvasdata="mc.canvasdata" renditions="mc.renditions"></rendition> 

и

rendition.html 

<pre> {{ rd.canvas | json }} </pre> 
<pre> {{ rd.renditions | json }} </pre> 

но rd.canvas и rd.renditions "undefined", и я не понимаю, почему.

Answer 1

В самом деле, в моем index.route.js я имел

.state('main.publication.paragraph', { 
     url: '/paragraphs/:idParagraph/page/:idPageParagraphs', 
     templateUrl: 'app/pages/rendition-map.html' 
     }) 

но в rendition-map.html, я звоню <rendition> вместо <mapping>, который зовет себя <rendition>, поэтому переменные были неопределенными, и мне пришлось выполнить обещание сделать это.

rendition-map.html 
<mapping></mapping> 

mapping.html 
<rendition renditions="mc.renditionsPromise"></rendition> 

Answer 2

Похоже, rendition не является ребенком mapping, поэтому mc.canvasdata не определено.

Установите mapping шаблон:

<mapping> 
    <rendition canvas="mc.canvasdata"...></rendition> 
</mapping>