
本文介绍了Angularjs 将多个参数传递给指令 ng-repeat的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有疑问
我有html:
在这里,有两种类型的数据:post 和 person.每个帖子的 json 都有一组人.我希望从指令中检索评级值、dataCategory 和 id (mydata.id/childData.id):
<p class="ng-binding">{{mydata.postdata}}</p><div star-rating rating-value="rating" data-cat="post" data-id="{{mydata.id}}" ></div><div ng-repeat="mydata.personRelatedData 中的childData">{{childData.personName}}<div star-rating rating-value="rating" data-cat="person" data-id="{{childData .id}}" >
我有一个指令:
myDirectives.directive('starRating', function () {返回 {限制:'A',模板:'
<ul style="margin : 0px">'+'<li ng-repeat="i in getNumber(myNumber)" ng-click="toggle($index)" id=$index readonly="false">'+'</li>'+'</ul></div>',范围: {评级值:'=',数据猫:'=',数据 ID: '=',只读: '@',onRatingSelected: '&'},链接:函数(范围,元素,属性){scope.myNumber = 5;scope.getNumber = function(num) {返回新数组(数量);}scope.toggle= 函数(val){console.log("值:"+val);console.log("dataCat :"+scope.dataCat);console.log("dataId : "+scope.dataId);...}
我应该在函数 toggle($index) 中添加什么来传递类别名称及其 ID?目前它显示:
值:1数据猫:未定义数据标识:未定义
我是 angular js 的新手,可以感觉到这里做错了什么..比如如何将范围值传递给切换功能?任何帮助都会很棒..
谢谢
解决方案
试试这个:
HTML
<div 星级 dt-cat="post" dt-id="mydata.id" ></div>
在 dt-id 中,您不应该使用 "{{mydata.id}}",只需使用 "mydata.id".
JavaScript:
myDirectives.directive('starRating', function() {返回 {限制:'A',模板:'<div ng-click="toggle()">Test</div>',范围: {dtCat: '@',dtId: '='},链接:功能(范围,元素,属性){scope.toggle = function() {console.log("dtCat:" + scope.dtCat);console.log("dtId : " + scope.dtId);};}};});
我测试了它,我有:
dataCat:post数据标识:5
我假设 dtCat 是字符串,所以你应该使用 dtCat: '@'.
我将 data- 更改为 dt- 因为 angular 从元素/属性的前面剥离数据.
Angular 将元素的标签和属性名称标准化,以确定哪些元素与哪些指令匹配.(...)
规范化过程如下:
1. 从元素/属性的前面去除 x- 和 data-.
2. 将 :、- 或 _ 分隔的名称转换为驼峰式命名法.
更多:创建自定义指令(匹配指令部分)
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
解决方案
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)
这篇关于Angularjs 将多个参数传递给指令 ng-repeat的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!