指令不接收对象作为参数

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

指令中的绑定说“=”，这意味着 Angular 会为你做绑定。不需要{{ }}。

 <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，不需要括号