Question

我有品牌和型号（型号属于品牌）

<ul>
    <li droppable ng-repeat="brand in vm.brands">
        <h1>{{ brand.name }}</h1>
        <ul>
            <li id="model.brand" draggable ng-repeat="model in vm.models | filter: { brand: brand }">
                <div model="model">{{model.name}}</div>
            </li>
        </ul>
    </li>
</ul>

我在指令中添加了一些拖放功能，以便在品牌之间移动模型。

(function() {
    'use strict';

    angular
        .module('app')
        .directive('draggable', draggable)
        .directive('droppable', droppable);

    draggable.$inject = [];
    droppable.$inject = [];

    function draggable() {

        var directive = {
            restrict: 'A',

            link: function(scope, elem, attrs) {

                elem.bind('dragenter dragover', function(event) {
                    event.stopPropagation();
                });

                elem.attr('draggable', 'true');

                elem.on('dragstart', function(event) {
                    event.dataTransfer.setData('text', event.target.id);
                });

            },

        };

        return directive;
    }

    function droppable() {

        var directive = {
            restrict: 'A',

            link: function(scope, elem, attrs) {

                elem.bind('dragenter dragover dragleave drop', function(event) {
                    event.preventDefault();
                });

                elem.bind('drop', function(event) {
                    event.preventDefault();
                    var data = event.dataTransfer.getData('text');
                    event.target.appendChild(document.getElementById(data));

                });

            },

        };

        return directive;
    }

})();

我的问题是：当我放弃元素时。如何更新模型品牌？

谢谢。

Answer 1

只要有丢弃事件，你就可以调用某个函数。

如下所示。

JS档案：

function droppable() {

    var directive = {
        restrict: 'A',
        scope:{
            onDropEvent: "&"
        },

        link: function(scope, elem, attrs) {

             elem.bind('dragenter dragover dragleave drop', function(event) {
                event.preventDefault();
            });

            elem.bind('drop', function(event) {
                event.preventDefault();
                var data = event.dataTransfer.getData('text');
                event.target.appendChild(document.getElementById(data));
                scope.onDropEvent({data: data}); // calling onDropEvent function with passing selected data.                        
            });
        }
   };
   return directive;
}

在HTML中：

<li droppable on-drop-event="callDropEvent(data)" ng-repeat="brand in vm.brands">

因此，在您的控制器中，您可以使用参数创建一个名为 callDropEvent 的函数，因此每当发生拖放事件时，您都可以编写任何逻辑来更改品牌模型。

从指令更新控制器

1 个答案: