When the star rating changes, 'starrr:change' dom event is fired. I have to catch this event and update the score variable in my angular.js scope. It was hard to find it but found it:
We define a directive in our angular app js file:
myApp.directive('rateable', function(){ return function(scope, elt, attr){ elt.bind('starrr:change', function(e, value){ scope.score = value; scope.$apply(); }); } });In the HTML Code, we use the rateable directive as HTML tag attribute:
<div class="starrr" data-rating="1" id="hearts" rateable></div>This way, whenever "starrr:change" event is fired from "#hearts", our score variable in the scope is updated. We have to call $apply to let Angular know some changes has been proposed.
No comments:
Post a Comment