Question

我对Angular中的Bindings（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

看来rendition不是mapping的孩子，因此mc.canvasdata未定义。

像这样设置mapping模板：

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

Answer 2

事实上，在我的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>

组件

2 个答案: