2016-03-24 15 views
0

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

}]); 
+1

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 "/>". –

+0

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

cevap

1

Eh tamam, burada bir çok konu olduğunu unutmayın ... Önce işlevi tanımlamak zorunda

angular.module('yourApp', []).directive('dencityRank', function(){ 
    return { 
    restrict: 'E', 
    scope: {userpoints: '='}, 
    controller: ['$scope', function($scope) { 
     $scope.getEmojiRank = function(points){  
     // If you like you can use $scope.userpoints directly and omit the function parameter 
     //... 
     }; 
    }], 
    template: '<i class= "em {{ getEmojiRank(userpoints) }} emoji-align"></i>' 
    }; 
}); 


// Move somewhere into global scope to make this definition only once 
Number.prototype.between = function (min, max) { 
return this >= min && this <= max; 
};