Wie Konvertieren von ng-attr-id-in id in Eckigen

Bin ich mit drag und drop-Bibliothek in Angular JS aus dem folgenden link, seine Arbeit perfekt, weil es nicht die id in der div.

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

Ich bin mit HTML 5 drag-and-drop-Funktionalität, aber das problem ist ich bin mit dynamisch generieren-id jeder über Winkel-J S. ich habe versucht ng-attr-id - und id beide, aber ich bin nicht in der Lage zu Holen die id meinem element über 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");

wo ist die controller-Funktion?
Ich habe Hinzugefügt-controller snapshot
stackoverflow.com/questions/8307635/... besprechen Sie diese Methode durch die Verwendung von jQuery, wenn es das ist, was Sie zu tun versuchen.
Ich kann nicht mit Jquery, benötige ich zur Umsetzung dieser durch Jqlite oder Angular JS

InformationsquelleAutor Ravi Dubey | 2015-05-29

Zugriff auf die Attribute in der "lvl-drag-drop.js" die Datei ist fehlerhaft, wenn Sie eine Richtlinie haben, können Sie den Zugriff auf die Attribute im Dritten argument.

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

Siehe die Kommentare in diesem Beispiel:

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

Vielen Dank, es funktioniert 🙂

InformationsquelleAutor Walter Chapilliquen - wZVanG

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.