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>