Question

我有一些积分。默认情况下，所有禁用都可以拖动。如果用户点击编辑链接，则43位置的点应该是可拖动的。但是仍然有禁用状态和监视功能没有执行..

HTML 



    <div ng-app="myapp" ng-controller="MainController">
    <a  href="#" ng-click="edit(43)">Make point 43 draggable</a> 

    <ul class="court">
               <li  ng-repeat="point in courtPoints" droppable data-location="{{point.location}}">
                   {{point.location}}
                 <div class="draggable-point draggable-point-location" 
                      location-point-draggable ng-show="point.marker==true"></div>
               </li>
           </ul>
    </div>

JS
var myapp = angular.module('myapp', []);

myapp.directive('locationPointDraggable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.draggable({
                containment: '.court',
                cursor: 'move',
                cancel: 'a',
                revert: 'invalid',
                snap: 'true',
                stop: function (event, ui) {
                }
            });

        }
    };
});

myapp.controller('MainController', ['$scope',  function ($scope) {

        Array.range = function (start, end) {
            var arr = [];

            for (var i = start; i < end; i++) {
                var point = {};
                point.location = i + 1;
                point.marker = false;
                point.allowDrag = false;
                  arr[i] = point;
            }
            return arr;
        };

        $scope.init = function () {
            $scope.courtPoints = Array.range(0, 50);
            $scope.courtPoints[42].marker = true; //42 because start from zero
        };

        $scope.edit = function (id) {
            $scope.courtPoints[42].allowDrag = true;
            $scope.courtPoints[42].location = '2014';
        };

        $scope.init();

   }]);

angular.bootstrap(document, ['myapp']);

Answer 1

我想你想在用户点击＆＃34; Make point 43 draggable＆＃34;时启用拖动元素。在你的小提琴上，你忘了添加jQueryUI，因此draggable函数不起作用并返回undefined。还有一件事，你的可拖动函数需要指定哪个元素禁用拖动取消属性，在这种情况下你指定一个标签＆＃34; a＆＃34;这是不正确的，因为你想要禁用黄色圆圈上的拖动，这是一个＆＃34; div＆＃34;里面＆＃34; li＆＃34;标签。我用过：

ng-class

添加＆＃34;禁用＆＃34; allowDrag属性对象为false时的类。您可以按如下方式更改可拖动功能：

myapp.directive('locationPointDraggable', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        element.draggable({
            containment: '.court',
            cursor: 'move',
            cancel: '.disable',
            revert: 'invalid',
            snap: 'true',
            stop: function (event, ui) {

            }
        });

    }
  };
});

并改变你的标记html：

<div class="draggable-point draggable-point-location" 
     location-point-draggable 
     ng-show="point.marker==true" 
     ng-class='{"disable" : !point.allowDrag, "":point.allowDrag}'
</div>

按钮43应该最初拖动禁用。现在当你点击

<a href="#" ng-click="edit(43)">Make point 43 draggable</a>

按钮43应该启用拖动。工作小提琴：http://jsfiddle.net/themyth92/gd2kzps2/

AngularJS：如果数组已更改，则来自控制器的所有指令

1 个答案: