Angularjs多个参数传递到指令纳克重复 [英] Angularjs pass multiple arguments to directive ng-repeat

查看:118
本文介绍了Angularjs多个参数传递到指令纳克重复的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我被困在一个疑问
我的html:

这里,有两种类型的数据:后和人。每个职位的JSON拥有者的数组。我要检索的额定值,dataCategory和id(mydata.id/childData.id)从指令控制器:

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>

我有一个指令:

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

我应该在功能切换($指数)增加,通过类别名称和它的ID呢?
目前,它表明:

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 

我在角JS新能感觉到这里做错事..像如何传递范围值切换功能?任何帮助将是巨大的..

谢谢

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

推荐答案

试试这个:

HTML

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

在DT-ID,你不应该使用{{mydata.id}},只需使用mydata.id

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

JavaScript的:

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

我认为 dtCat是字符串所以你应该使用 dtCat:'@'

我改变了数据 - DT - ,因为从元件的前角的带数据 - /属性

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. (...)

归一化处理是如下:结果
1条X轴和数据 - 从元件的前 /属性结果。
2.转换的:, - 或_分隔的名字驼峰。

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.

更多:创建自定义指令(部分匹配指令)

这篇关于Angularjs多个参数传递到指令纳克重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆