Как преобразовать ng-attr-id в id в Angular

Question

Я использую библиотеку перетаскивания в Angular JS из приведенной ниже ссылки, ее работа отлично, потому что она не имеет идентификатора в div.

https://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

Я использую HTML 5 функциональность перетаскивания, но проблема я столкнулся для создания динамического идентификатора каждого с помощью углового J S. Я попытался ng-attr-id и идентификатор обоих, но я не в состоянии принести id моего элемента через angular.element(element l).a t tr("id").

Working Code 
    ------------ 
    HTML: 

     <div ng-controller="myCtl" style="margin-top :50 p x;"> 
        <div class="row"> 
         <div class="col-m d-1 col-m d-offset-1"> 
          <p>Click and drag a color onto the grid to the right</p> 
          <div class="peg green" x-l v l-drag gable="true" data-color="green">Green</div> 
          <div class="peg red" x-l v l-drag gable="true" data-color="red">Red</div> 
          <div class="peg blue" x-l v l-drag gable="true" data-color="blue">Blue</div> 
          <div class="peg black" x-l v l-drag gable="true" data-color="black">Black</div> 
          <div class="peg grey" x-l v l-drag gable="true" data-color="grey">Grey</div> 
         </div> 

         <div class="col-m d-10"> 
          <div n g-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"> 
           <span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" x-l v l-drop-target="true" x-on-drop="dropped(drag E l, drop E l)"></span> 
          </div> 
         </div> 
        </div> 
       </div> 

Controller(between the modal and view for drag and drop): 

angular.module('my App', ['l v l. directives .drag drop']) 
    .controller('myCtl', ['$scope', function($scope) { 
    $scope.dropped = function(dragEl, dropEl) { 
     // this is your application logic, do whatever makes sense 
     var drag = angular.element(dragEl); 
     var drop = angular.element(dropEl); 

     console.log("The element " + drag.attr('id') + " has been dropped on " + drop.attr("id") + "!"); 
    }; 
    }]); 

    Modal(fetch the id of the dragged object): 

     angular.element(element).at tr("id"); 

    Not Working Code 
    ---------------- 

    HTML: 

     <div ng-controller="dd Controller" style="margin-top :50 p x;"> 
      <div class="row"> 
       <div class="col-m d-1 col-m d-offset-1"> 
        <p>Click and drag a color onto the grid to the right</p> 
        <div ng-repeat="list in List"> 
         <div id={{list.Name}} class="item" x-lvl-drag gable="true">{{list.Name}}</div> 
        </div> 
       </div> 
       <div class="col-m d-10"> 
        <div n g-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"> 
         <span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" x-l v l-drop-target="true" x-on-drop="dropped(drag E l, drop E l)"></span> 
        </div> 
       </div> 
      </div> 
     </div> 

    Controller(between the modal and view for drag and drop): 
    angular.module('my App', ['l v l. directives .drag drop']) 
     .controller('my C t l', ['$scope', function($scope) { 
     $scope.dropped = function(drag E l, drop E l) { 
      // this is your application logic, do whatever makes sense 
      var drag = angular.element(drag E l); 
      var drop = angular.element(drop E l); 

      console.log("The element " + drag. at tr('id') + " has been dropped on " + drop .at tr("id") + "!"); 
     }; 
     }]); 

    Modal(fetch the id of the dragged object): 

     angular.element(element).at tr("id"); 

Answer 1

Доступ к атрибутам в файле «ЛВЛ-бугельных-drop.js» является неправильным, если вы используете директиву, вы можете получить доступ к атрибутам в третьем аргументе.

ссылка: функция (сфера, эль, ATTRS, контроллер)

Смотрите комментарии в этом примере:

module.directive('lvlDraggable', ['$rootScope', 'uuid', function($rootScope, uuid) { 
    return { 
     restrict: 'A', 
     link: function(scope, el, attrs, controller) { 

      //angular.element is no longer necessary if it refers to the element. 
      el.attr("draggable", "true"); 

      //Incorrect 
      var id = angular.element(el).attr("id"); 
      //This is correct 
      var id = attrs.id; 

      if (!id) { 
       id = uuid.new(); 
       el.attr("id", id); //Also here 
      } 

      //.. more ... 
     } 
    } 
}]);