directive not receiving object as a param

Question

I'm coding with AngularJS version 1.5.7.

For some reason, the directive doesn't receive the variable cdata which is an object.

Why doesn't the directive receive the variable?

Here below I pasted all my code:

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'
  };
}]);

I also want to point out that I've migrated from angular 1.4.8 to 1.5.7 and from ui-router 0.2.15 to 0.3.1

may be related to [this answer](http://stackoverflow.com/a/31013435/2435473) — Pankaj Parkar, Jun 28 '16 at 14:16
sounds like the problem was related to the ui-scroll module. After fetching it with bower, no more issues. Thanks all! — DevStarlight, Jun 28 '16 at 18:25

score 2 · Answer 1 · answered Jun 28 '16 at 14:05

2

The binding in the directive says "=", that means angular will do the binding for you. No need for {{ }}.

 <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>

With psize I am not sure if you need {{ }} but for the cdata there is no need for the brackets

answered Jun 28 '16 at 14:05

Daniel

609
2
7
17

I have updated the post. It was a mistake of my code when copying. The point here is to receive in my directory a `Read Only` data. – DevStarlight Jun 28 '16 at 14:09
1

well what you could do instead of `@` is a one way databinding.. `::=`. Makes the markup cleaner and I was thought it looks weird to have markup with `{{ }}`in an attribute of angular when you could overwrite that behaviour – Daniel Jun 28 '16 at 20:10

directive not receiving object as a param

1 Answers1