Basit jQuery Star Rating ve angularjs (ng-tekrar)

Question

Ah Oğlum, angularjs ile http://www.jqueryscript.net/other/Simple-jQuery-Star-Rating-System-For-Bootstrap-3.html birlikte bu eklentiyi kullanmak istiyorum

Oh Boy.

Sayfa ilk kez yüklendiğimde başlatılan bir JSON kullandığım sürece çalışıyor. Bir diziye eleman eklediğimde veya hatta eklediğimde, yıldız sistemi artık çalışmıyor. Hatayı bulmak için şimdiye kadar gelmek beni çoktan aldı ama çözemiyorum.

Yeni öğeleri zorladığımda neye benzediğini görüyorsunuz.

google krom elemanları bakıldığında yeni oluşturulan Yıldız Puanları kod bir demet eksik olduğunu görebiliyordu. Ben yeni unsurlar itmek için bir düğmeye basmak sonra ilk kez sayfasını

<div class="star-rating rating-md rating-active"><div class="clear-rating clear-rating-active" title="Clear"><i class="glyphicon glyphicon-minus-sign"></i></div><div class="rating-container rating-gly-star" data-content=""><div class="rating-stars" data-content="" style="width: 142px;"></div><input value="4" type="number" class="rating form-control hide" min="0" max="5" step="0.5"></div><div class="caption"><span class="label label-primary">Four Stars</span></div></div> 

yüklediğinizde

Oluşturulan, yeni kod bu

<input value="4" type="number" class="rating" min="0" max="5" step="0.5"> 

html kodu gibi görünüyor

<div ng-repeat="x in allRecords" > 
         <input id="input-21d" value="4" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm"> 
        </div> 

Kontrolör Init

Edi: cevap eğer :)

var myApp = angular.module('myApp', ['ngAnimate']) 


myApp.controller("ContactController", function ($scope, $sce, $http, $timeout) { 

$scope.allRecords = [ 
       { 
        "Name" : "Alfreds Futterkiste", 
        "City" : "Berlin", 
        "Country" : "Germany" 
       }, 
       { 
        "Name" : "Berglunds snabbköp", 
        "City" : "Luleå", 
        "Country" : "Sweden" 
       }, 
       { 
        "Name" : "Magazzini Alimentari Riuniti", 
        "City" : "Bergamo", 
        "Country" : "Italy" 
       }, 
       { 
        "Name" : "Wolski Zajazd", 
        "City" : "Warszawa", 
        "Country" : "Poland" 
       } 
      ] 
      ; 


    $scope.addElements= function() { 
    var obj = { Name: 'Hello world!' }; 
       $scope.allRecords.push(obj); 
}; 

}); 

ÇÖZÜM yeni unsurlar ekledikten sonra My denetleyici ve modül böyle göz kurmak, bu düşünün lütfen ben sadece yıldız-rating.js

$(function() { 
       function load_script() { 
        $('#myscript').remove(); 
        $.getScript("js/star-rating.js?s=", function() { 
         $('script:last').attr('id', 'myscript');        
        }); 
       } 
       load_script(); 
      }); 

yeniden

Sanırım en iyi yol bu değil ama şimdiye kadar bunu nasıl yapacağımı bilmiyorum. Ve star rating.js sadece 22kb büyük olduğundan, daha sonra herhangi bir performans sorunu olmamalı.

Edit 2 Bu Yıldız Derecelendirmesine geçtim. http://rateit.codeplex.com/

Ancak "yenileme sorunu" hala kalır, bu durumda "jquery.rateit.js" .js dosyasını yeniden yüklemem gerekiyor demektir. Daha fazla zamana ve sabrım varsa, bunu daha iyi hale getireceğim: D

Answer 1

Her yeni nesneyi eklediğinizde, angularjs sırayla jquery-rating'in bilmediği yeni giriş elemanı ekleyin. angularjs ile entegre etmek, bu gibi yeni bir direktif oluşturmak zorunda:

var myApp = angular.module('myApp', ['ngAnimate']); 
myApp.controller("ContactController", function ($scope, $sce, $http, $timeout) { 
     $scope.allRecords = [ 
     { 
      "Name": "Alfreds Futterkiste", 
      "City": "Berlin", 
      "Country": "Germany" 
     }, 
     { 
      "Name": "Berglunds snabbköp", 
      "City": "Luleå", 
      "Country": "Sweden" 
     }, 
     { 
      "Name": "Magazzini Alimentari Riuniti", 
      "City": "Bergamo", 
      "Country": "Italy" 
     }, 
     { 
      "Name": "Wolski Zajazd", 
      "City": "Warszawa", 
      "Country": "Poland" 
     } 
     ]; 

     $scope.addElements = function() { 
      var obj = { Name: 'Hello world!' }; 
      $scope.allRecords.push(obj); 
     } 
    }).directive('myStart', function() { 
     return function (scope, element, attrs) { 
      $(element).rating(); 
     }; 
    }); 

ve onları html (sınıf puanı kaldırmak, yani jquery-değerlendirme otomatik Rating yaratmaz):

<div ng-app="App1" ng-controller="Controller1"> 
<input ng-repeat="x in allRecords" my-start id="rating-system" type="number" min="1" max="5" step="1"> 
<button ng-click="addElements()">Click me</button> 

her seferinde, bir giriş etiketi oluşturulduğunda, bu yeni girdiye uygulanacak $ .rating öğesini arayacağız.