Question

我有一个div基本上它是由angularjs使用像这样的ngrepeat生成的

var templateElemUrl = '';
        $http({url: templateElemUrl,
        dataType: 'json',
        method: 'POST',
        data: '',
        headers: {
            "Content-Type": "application/json"
        }}).success(function(data, status, headers, config) {
            //check if the response has ok status
            if(data.status == "ok"){
                $scope.templateElements = data.data;
                droppable(); //make this div droppable
                console.log(data.data);
            }


            }).error(function(data, status, headers, config) {

            console.log('error');

        });

我使用范围templateElements详细信息来创建div，基本上它包含div的大小。

然后我创建的每个div我都放了droppable类然后我调用函数droppable()只是为了找到这个代码：

function droppable(){
    console.log('here');
    $('.droppable').droppable({
        accept: ".draggableItem",
        hoverClass: "ui-state-hover",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
             console.log('dropped');
        }
    });

和我的div我不包括内联样式因为它看起来很乱但是它就像这样

<div data-ng-repeat="tempElement in templateElements" class="droppable" >{{tempElement.divname}}</div>

有谁可以帮助我？任何评论和想法都很受欢迎。

非常感谢你

Answer 1

你必须初始化指令中的可丢弃元素（指令通常用于将jquery插件集成到角度应用程序中）：

app.directive('droppable', function() {
  return {
      link: function (scope, element) {
         $(element).droppable({
            accept: ".draggableItem",
            hoverClass: "ui-state-hover",
            activeClass: "ui-state-highlight",
            drop: function( event, ui ) {
                 console.log('dropped');
            }
        });
      } 
    }
  };
});

HTML：

<div data-ng-repeat="tempElement in templateElements" class="droppable" droppable>{{tempElement.divname}}</div>

数据绑定：

var templateElemUrl = '';
        $http({url: templateElemUrl,
        dataType: 'json',
        method: 'POST',
        data: '',
        headers: {
            "Content-Type": "application/json"
        }}).success(function(data, status, headers, config) {
            //check if the response has ok status
            if(data.status == "ok"){
                $scope.templateElements = data.data;
                //droppable(); //remove this line
                console.log(data.data);
            }


            }).error(function(data, status, headers, config) {

            console.log('error');

        });

http://plnkr.co/edit/Xro0COmAJ8mA5ONaILjC?p=preview

动态添加div作为droppable，ng-repeat和Jquery

1 个答案: