javascript - 如何在 Angular 中将 ng-attr-id 转换为 id

Question

我在下面的链接中使用 Angular JS 中的拖放库，它工作得很好，因为它在 div 中没有 id。

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

我正在使用 HTML 5 拖放功能，但我面临着通过 Angular J S 生成每个元素的动态 id 的问题。我已经尝试过 ng-attr-id 和 id 两者，但我是无法通过 angular.element(element l).a t tr("id") 获取我的元素的 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”文件中的属性不正确，如果您使用指令，则可以访问第三个参数中的属性。

link: function (scope, el, attrs, controller)

请参阅此示例中的注释:

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 ...
        }
    }
}]);