Question

我有这个$scope包含数组基本上我使用服务来获取这些代码：

var myApp = angular.module('app',[]);

myApp.controller('GetItemCtrl', ['$scope', '$http', function($scope, $http) {

    var itemUrl = 'json/item.json';
    $http({url: itemUrl,
    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"){
        console.log(data.data);
            $scope.items = data.data;
        }


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

        console.log('error');

    });

}]);

而且我还有一个可拖动的项目和droppable div，基本上我只需拖动项目然后将其放到droppable div。这是可拖动的代码

myApp.directive('draggable', function() {
  return {
      link: function (scope, element) {
         $(element).draggable({
            helper: function(){
              return $("<tr></tr>").append($(this).find('.img').clone());
            },
              revert: 'original',
              cursor: "move",
            revert: "invalid",
            cursorAt: {top: 5, left: 5 } ,
            zIndex: 100,
            tolerance:"pointer",
            start: function (event, ui) {

            $(this).css('opacity', '.5');

            },
            stop: function (event, ui) {
                    $(this).css('opacity', '1');

            }
         });
      } 
    }
});

可拖动的html就是这个

<tr id="{{ item.Item.itemnumber}}" data-ng-repeat-start="item in items" draggable class="draggableItem">
                <td><img class="img" id="{{ item.Item.itemnumber }}" width="50px" 
                        src="source here"/></td>
                <td>{{ item.Item.itemnumber}}</td>
                <td>{{ item.Item.itemtext1 }}</td>
                <td>{{ item.Item.recommended_price}}</td>
</tr>

我的问题是我想从我的指令（droppable）访问我的控制器中的$scope.items这是droppable的代码：

myApp.directive('droppable', function() {
  return {

      link: function (scope, element) {
         $(element).droppable({
            accept: "#itemlist .draggableItem",
            hoverClass: "dropHover",
            activeClass: "ui-state-highlight",
            drop: function( event, ui ) {

        //I WANT TO ACCESS THE $scope.items HERE

        console.log(ui);
            }
        });
      } 
    }
});

并且droppable是这样的：

<div data-ng-repeat="tempElement in templateElements" class="bg-default border-solid droppable" droppable="" >
{{ tempElement.TemplateElement.elementname }}
 </div>

我在我的droppable指令中尝试了这个但是它没有改变它也禁用了div droppable功能我想我在某处有错误但控制台不会打印任何。

restrict: 'E',
    replace: true,
    template: '<div></div>',
    scope: {
      items: '=items'
    },

任何人都可以帮我在我的指令中访问包含数组的$ scope。

提前感谢您提出任何意见和建议。

如何在指令中访问包含数组的范围？

0 个答案: