Angularjs pass multiple arguments to directive ng-repeat

angularjs, angularjs-directive, angularjs-ng-repeat

Solution

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)

Problem

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

Original source