$ kapsam değişkeni, yönerge kapsamı

Question

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

}]); 

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