指令不接收对象为param

Question

我正在用AngularJS版本1.5.7编写代码。

由于某种原因，指令没有接收变量cdata，它是一个object。

为什么指令不接收变量？

下面我粘贴了我所有的代码：

home.js

'use strict';

var home = angular.module('app.home', [
  'global.factory',
  'home.factory',
  'ui.scroll',
  'ui.scroll.jqlite',
  'd.card'
]);

home.controller('HomeController', [
  'homeFactory',
  '$timeout',
  function (homeFactory, $timeout) {

    var data = this;

    data.posterSize = (screen.width - 42) / 3;

    homeFactory.getJSON().then(function (response) {
      data.feed = response.home;
    });

    data.datasource = {
      get: function(index, count, success) {
        $timeout(function() {
          var start = Math.max(0, index);
          var end = Math.min(index + count, data.feed.length);

          var results = [];
          for (var i = start; i < end; i++) {
            results.push(data.feed[i]);
          }

          success(results);
        }, 100);
      }
    };
  }
]);

_home.html

<article ng-controller="HomeController as myHome" class="base-gen" ui-scroll-viewport style="height:100%">
  <card class="card" ui-scroll="element in myHome.datasource" cdata="{{element}}" psize="{{myHome.posterSize}}"></card>
</article>

card.js

'use strict';

var dCard = angular.module('d.card', ['global.factory']);

dCard.directive('card', [ 'globalImages', function (globalImages) {
  return {
    restrict: 'E',
    scope: {
      cdata: '@',
      psize: '@'
    },
    controller: function() {
      console.log(this.cdata);
    },
    controllerAs: 'myCard',
    bindToController: true,
    templateUrl: 'app/Modules/card.html'
  };
}]);

我还想指出，我已经从angular 1.4.8迁移到1.5.7，从ui-router 0.2.15迁移到0.3.1

Answer 1

指令中的绑定是"="，这意味着角将为您完成绑定。不需要{{ }}。

 <article ng-controller="HomeController as myHome" class="base-gen" ui-scroll-  viewport style="height:100%">
   <card class="card" ui-scroll="element in myHome.datasource" cdata="element" psize="{{myHome.posterSize}}"></card>
 </article>

对于psize，我不确定您是否需要{{ }}，但是对于cdata，不需要括号