tanımında tanımlanmamış olduğundan, bu konuda SO ile ilgili çeşitli sorular olduğunu biliyorum. Onları bir sürü kontrol ettim ve çeşitli kombinasyonları denedim ve hala benim direktifimi elde edemiyorum.
Esasen, bir ng-yinelemede yönergeme bir tamsayı iletmeye çalışıyorum ve sayıya bağlı olarak bir emoji oluşturmasını sağlıyorum.
sorun
Bu html olduğunu ... o değişken ancak bağlantı fonksiyonunda şablonda tanımlanmamış scope.userpoints olmasıdır. Her iki $scope.favourites
ve f av.update
uyumsuz
<div ng-repeat="fav in favourites">
<dencity-rank userpoints="fav.update.poster.points"></dencity-rank>
</div>
doldurulur ve bu yönerge kodu
.directive('dencityRank', [function(){
Number.prototype.between = function (min, max) {
return this >= min && this <= max;
};
var getEmojiRank = function(points){
console.log(points);
if(typeof(points) === "undefined") return;
if (points < 3) return "em-hatched_chick";
else if (points.between(4, 8)) return "em-hatched_chick";
else if (points.between(9, 14)) return "em-baby_chick";
else return "em-hatched_chick";
};
return {
scope: {
userpoints: '=',
}, // use a new isolated scope that does not inherit from parent
restrict: "E", // use as html element
replace: false, // replace the directive with the result of the directive?
template: function(scope){
return '<i class= "em ' + getEmojiRank(scope.userpoints) + ' emoji-align"></i>'; // this doesnt work
},
link: function (scope, element, attrs) {
//console.log(getEmojiRank(scope.userpoints)); // this works
}
};
}]);
dize olarak şablonunu kullanmayı deneyin: o yönerge kapsamı ve (örnek kod, test değildir) şablonda da ona, '<ı ng-class = "{em: true, \' emoji-Alig n \ ': true, getEmojiRank (kullanıcı noktaları): true} işlev yaklaşımınız yerine "/>". –
Bunun çalışmadığı yazım hataları var. Sonuçta tüm html öğesini değiştirmeyi tercih ederim (yani şunu kullanın: true) ancak sorun olup olmadığını görmek için bunu kapattım. – rex