AngularJS组件之间的绑定

Question

我不是很喜欢Angular中的绑定（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>