Динамически добавили ДИВ в сбрасываемом, ngrepeat и Jquery

Question

я имею ДИВ в основном она порождается angularjs использования ngrepeat как этот

var templateElemUrl = ''; 
     $http({url: templateElemUrl, 
     dataType: 'json', 
     method: 'POST', 
     data: '', 
     headers: { 
      "Content-Type": "application/json" 
     }}).success(function(data, status, headers, config) { 
      //check if the response has ok status 
      if(data.status == "ok"){ 
       $scope.templateElements = data.data; 
       droppable(); //make this div droppable 
       console.log(data.data); 
      } 


      }).error(function(data, status, headers, config) { 

      console.log('error'); 

     }); 

Я использовал область применения templateElements деталь для создания дивы, в основном он содержит размер div был бы.

тогда каждый ДИВ я создаю я поставил класс droppable затем я вызвать функцию droppable() только землю к этому коду:

function droppable(){ 
    console.log('here'); 
    $('.droppable').droppable({ 
     accept: ".draggableItem", 
     hoverClass: "ui-state-hover", 
     activeClass: "ui-state-highlight", 
     drop: function(event, ui) { 
      console.log('dropped'); 
     } 
    }); 

и мой DIV я не включают в себя встроенный стиль потому что это выглядеть грязным, но это выглядит это

<div data-ng-repeat="tempElement in templateElements" class="droppable" >{{tempElement.divname}}</div> 

Может ли кто-нибудь мне помочь? любые комментарии и идеи хорошо оценены.

спасибо большое

Answer 1

вы должны инициализировать Выбрасывается элементы директивы (директивы обычно используются для интеграции JQuery плагинов в угловые приложения):

app.directive('droppable', function() { 
    return { 
     link: function (scope, element) { 
     $(element).droppable({ 
      accept: ".draggableItem", 
      hoverClass: "ui-state-hover", 
      activeClass: "ui-state-highlight", 
      drop: function(event, ui) { 
       console.log('dropped'); 
      } 
     }); 
     } 
    } 
    }; 
}); 

HTML:

<div data-ng-repeat="tempElement in templateElements" class="droppable" droppable>{{tempElement.divname}}</div> 

привязка данных:

var templateElemUrl = ''; 
     $http({url: templateElemUrl, 
     dataType: 'json', 
     method: 'POST', 
     data: '', 
     headers: { 
      "Content-Type": "application/json" 
     }}).success(function(data, status, headers, config) { 
      //check if the response has ok status 
      if(data.status == "ok"){ 
       $scope.templateElements = data.data; 
       //droppable(); //remove this line 
       console.log(data.data); 
      } 


      }).error(function(data, status, headers, config) { 

      console.log('error'); 

     }); 

http://plnkr.co/edit/Xro0COmAJ8mA5ONaILjC?p=preview