Как конвертировать ng-attr-id в id в Angular

Question

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

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

Я использую функцию перетаскивания HTML 5, но проблема, с которой я сталкиваюсь, заключается в создании динамического идентификатора каждого с помощью Angular 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

Доступ к атрибутам в файле "lvl-drag-drop.js" некорректен, если вы используете директиву, вы можете получить доступ к атрибутам в третьем аргументе.

ссылка: функция (область видимости, el, 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 ...
        }
    }
}]);