Как получить данные из элемента в AngularJs?

Question

[DizzyJager]

Есть контроллер с двумя массивами объектов, скажем, Garages и Cars. Garage может содержать Car.

$scope.Model.Garages = garageService.getGarages();
$scope.Model.Cars = garageService.getCars();

Во View элементы Cars поддерживают перетаскивание в Garage, за это отвечают директивы 'data-draggable' и 'data-droptarget'

module.directive('draggable', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        link: function (scope, el, attrs, controller) {
            el.attr("draggable", "true");
                
            el.bind("dragstart", function(e) {
                var id = el.attr('data-draggable');

                e.dataTransfer.setData('text', id);
            });
        }
    };
}]);

module.directive('droptarget', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        scope: {
            onDrop: '&'
        },
        link: function(scope, el, attrs, controller) {
            el.bind("drop", function (e) {
                var sourceElementId = e.dataTransfer.getData("text");
                var sourceElement = document.querySelector('[data-draggable="' + sourceElementId + '"]');

                var targetElement = el;
                
                scope.onDrop({src: sourceElement, dest: targetElement});
            });
        }
    };
}]);

В конце перестаскивания нужно проапдейтить данные в контроллере: переместить объект из Cars в Garage. Для этого директива вызывает метод контроллера, передавая туда элементы Car и Garage.

<div class="car" ng-repeat="car in Model.Cars" data-draggable data-on-drop="moveCarToGarage(car, garage)"></div>

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

На данный момент использую следующее решение (метод moveCarToGarage в контроллере) :

var carData = angular.element(car).scope().car;
var garageData = angular.element(garage).scope().garage;

garageData.Cars.push(carData);

$scope.apply();

Comments

[kompi]

Покажите директиву

[DizzyJager]

@kompi добавил

Answer 1

[Сергей Протько]

вам нужно реализовать директиву, которая будет отвечать за drag'n'drop объектов, и внутри организовать калбэки, которые можно задавать через scope. (например что-то типа on-drop). Для удобства настройки можно сделать несколько директив, и одну главную (читать про require).

Работать с элементами можно только в директивах, но директивы не должны ничего знать о вашей бизнес логике. То есть если у вас появляются конструкции вида angular.element(garage).scope() то это повод задуматься.

Должно получиться что-то такое:

<ul>
<li data-ng-repeat="car in Model.cars" data-draggable="car" data-draggable-item="car">{{car.modelName}}</li>
</ul>
<ul>
    <li data-ng-repeat="garage in Model.garages"  data-droppable="car" data-on-drop="doSomething">{{garage.name}}</li>
</ul>

атрибуты data-draggable и data-droppable будут отмечены тегами, что бы указать какие объекты можно тягать куда. Для вашей задачи можно и без этого.

// controller
$scope.doSomething = function (car, garage) {
    // ставим машинку в гараж, убираем ее из списка если хотим, или что-то еще...
    // контроллер в этом случае вообще ничего не знает о drag n drop, 
    // только о том что что-то нужно сделать с данными.
};

Comments

[DizzyJager]

директива и не знает. Она просто вызывает callback (тот самый on-drop), передавая два элемента. angular.element().scope() делается уже в контроллере в обработчике callback'a

[Сергей Протько]

angular.element() не должно быть в контроллере.

[DizzyJager]

аргументы? Преобразований dom'a там нет, все что нужно - получить scope элемента. Каким образом тогда вы предлагаете после драг-н-дропа машины в гараж обновить данные в массивах в контроллере?

[Сергей Протько]

@DizzyJager, просто обновить массивы и все.

Я обновил ответ.

[DizzyJager]

@Fesor Сейчас все сделано в точности как вы описали. Каким образом обносить массивы, если мне на вход в функцию doSomething приходят элементы?

[Сергей Протько]

@DizzyJager суть в том что контроллер должен работать только с имеющимся у него $scope, и теми данными, которые он туда запихнул. Задача директив в контексте вопроса - уведомить контроллер о том, что нужно что-то сделать с данными. Причем в этом случае не важно как у вас организовано взаимодействие, через drag-n-drop, или еще как-то, контроллер становится менее зависим от представления, а все эти фишки с drag-n-drop можно будет в последствии реюзать.

[Сергей Протько]

@DizzyJager, а почему у вас там элементы? У вас должны быть айтемы массивов.

[DizzyJager]

@Fesor Он и так работает с имеющимся $scope и данными, которые он туда запихнул.
Директива работает с dom'ом, она ничего не знает про данные, которые пришли из контроллера, соответственно обратно в колбэк она и передаст dom объекты, которые когда-то сформировал сам контроллер и которые привязаны к его данным

[DizzyJager]

@Fesor откуда там будут айтемы из массива? колбек вызывается из директивы. Директива ничего не знает ни про какие массивы, знает только про dom

[Сергей Протько]

@DizzyJager, нет, директивы могут работать и с DOM и со $scope. Вот пример. В этом то и суть. Директивы занимаются конвертацией model-value во view-value и обратно. Они нужны что бы отвязать контроллеры от представления, от работы с DOM. То есть директивы получают данные из $scope и должны контроллеру их и отдавать.

[DizzyJager]

@Fesor можно пример?
добавил код директивы

[Сергей Протько]

@DizzyJager, директиве можно сказать какой элемент массива привязан к ней через значение атрибутов. Например так:

angular.modeul('app').directive('droppable', function () {
    return {
        scope: {
            item: '=droppable',
            callback: '&onDrop'
        },
        link: function (scope, el, attr) {
             el.on('drop', function (){
                 scope.$apply(function () {
                       scope.callback(scope.item);
                 })     
             });
        }
    }
});

[Сергей Протько]

@DizzyJager, сейчас попробую переделать вашу директиву.

[DizzyJager]

@Fesor Спасибо. Из вашего примера действительно легко и удобно получается элемент массива связанный с droppable. Осталась проблема с тем, как получить элемент, который мы, собственно, перетаскиваем. Между директивами он передается через dataTransfer, как того требует html5. При этом передаем мы все-таки dom-данные (например его id). Видимо для этого придется все-таки делать angular.element().scope(), нет?

[Сергей Протько]

@DizzyJager, вы можете:
1) сделать главную директиву, которая будет отвечать за управление что куда и как перетаскивают (она должна быть навешана на общего родителя, и иметь контроллер, который будет инджектиться в зависимые директивы

2) брать у элемента scope (да, через angular.element().scope()) и брать значение (что брать должно быть указано в каком-либо атрибуте элемента). Не то что бы очень красивый способ, но работать будет и принципы разделения на директивы/контроллеры не будет нарушен. Но у вас из этого прослеживается явная зависимость одной директивы от другой, так что первый способ по хорошему более рассово верный.

[Сергей Протько]

@DizzyJager то есть при втором вариане можно достать значения через $eval у $scope.

[DizzyJager]

@Fesor Второй вариант уже реализовал, но первый поинтереснее. Попробую. Спасибо!

Answer 2

[kompi]

Кто мешает внутри moveCarToGarage(car, garage), пробежаться циклом по массиву данных и обновить совпадающие значения?

Comments

[DizzyJager]

ничего не мешает. Но если мне нужно раздавать id элементам и потом по ним снова искать в массивах, то нет никакого смысла в angularjs и его привязке к данным. А вопрос именно в рамках angularjs