Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs pass multiple arguments to directive ng-repeat

I am stuck in a doubt
I have html :
Here, there are two types of data : post and person. The json for each post has array of persons. I wish to retrieve the rating Value, dataCategory and id (mydata.id/childData.id) from directive to controller :

<div ng-repeat="mydata in data" class="ng-scope ng-binding">

   <p class="ng-binding">{{mydata.postdata}}</p> 
   <div star-rating rating-value="rating" data-cat="post" data-id="{{mydata.id}}" ></div>

   <div ng-repeat="childData in mydata.personRelatedData">
          {{childData.personName}}  
          <div star-rating rating-value="rating" data-cat="person" data-id="{{childData .id}}" >
   </div>
</div>

I have a Directive :

myDirectives.directive('starRating', function () {
    return {
      restrict: 'A',
      template: '<div> <ul style="margin : 0px">' +
                  '<li ng-repeat="i in getNumber(myNumber)" ng-click="toggle($index)" id=$index readonly="false">' +                   
                  '</li>' +
                '</ul></div>',

      scope: {
        ratingValue: '=',       
        dataCat: '=',  
        dataId: '=',  
        readonly: '@',
        onRatingSelected: '&'       
      },
      link: function (scope, elem, attrs) {       
      scope.myNumber = 5;       
      scope.getNumber = function(num) {
                   return new Array(num);   
        }       

        scope.toggle= function(val) {
               console.log("Val : "+val);
               console.log("dataCat : "+scope.dataCat);
               console.log("dataId : "+scope.dataId);
               ...
        }

What should I add in function toggle($index), to pass category name and its id too? Currently it shows :

Val : 1 
dataCat : undefined 
dataId : undefined 

I am new in angular js and can sense doing something wrong here.. like how to pass scope values to toggle function? Any help would be great..
Thanks

like image 842
zeetit Avatar asked Dec 02 '13 18:12

zeetit


1 Answers

Try this:

HTML

<div star-rating dt-cat="post" dt-id="mydata.id" ></div>

In dt-id you shouldn't use "{{mydata.id}}", just use "mydata.id".

JavaScript:

myDirectives.directive('starRating', function() {
  return {
    restrict: 'A',
    template: '<div ng-click="toggle()">Test</div>',
    scope: {
      dtCat: '@',
      dtId: '='
    },
    link: function(scope, elem, attrs) {
      scope.toggle = function() {
        console.log("dtCat: " + scope.dtCat);
        console.log("dtId : " + scope.dtId);
      };
    }
  };
});

I test it and I have:

dataCat: post
dataId : 5

I assumed that dtCat is string so you should use dtCat: '@'.

I changed data- to dt- because angular strip data- from the front of the element/attributes.

Angular normalizes an element's tag and attribute name to determine which elements match which directives. (...)

The normalization process is as follows:
1. Strip x- and data- from the front of the element/attributes.
2. Convert the :, -, or _-delimited name to camelCase.

More: Creating Custom Directives (section Matching Directives)

like image 190
lukpaw Avatar answered Nov 15 '22 00:11

lukpaw