angularjs - AngularJS将多个参数传递给指令ng-repeat

Question

我陷入怀疑我有html:
在这里，有两种类型的数据:post和person。每个帖子的json都有一组人。我希望从指令到 Controller 中检索等级值，dataCategory和id(mydata.id/childData.id):

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

我有一个指令:

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);
               ...
        }

我应该在函数toggle($ index)中添加什么来传递类别名称及其ID？
目前显示:

Val : 1 
dataCat : undefined 
dataId : undefined 

我是angular js的新手，在这里可以感觉到做错了什么。任何帮助都会很棒。
谢谢

Answer 1

尝试这个:

的HTML

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

在dt-id中，您不应使用“{{mydata.id}}” ，而不必使用“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);
      };
    }
  };
});

我测试了，我有:

dataCat: post
dataId : 5

我假设 dtCat是字符串，因此您应该使用 dtCat:'@'。

我将数据更改为 dt-，因为 Angular 从元素的前面剥离了数据-/属性。

Angular对元素的标记和属性名称进行归一化，以确定哪些元素与哪些指令匹配。 (...)

规范化过程如下:
1.从元素/属性的开头剥离x-和数据。
2.将:，-或_分隔的名称转换为camelCase。

更多:Creating Custom Directives (section Matching Directives)