Angular update scope with individual values for $watch inside directive

Question

Let's say I have two draggable elements

<div draggable enabled="false"></div>
<div draggable enabled="false"></div>

To enable/disable the elements I use the following directive:

App.directive('draggable', function() {
return {
restrict:'A',
link: function(scope, element, attrs) {
    element.draggable();

    scope.$watch('enabled', function (val) {
    element.draggable(val === true ? 'enable' : 'disable');

  });
}
};});

I have setup a $watch looking enabled to be true/false. Now I would like to use my controller to change the 'enabled' property.

App.controller('TypeAheadController',function($scope){

//some code
$scope.enabled = true;
});

However, when I use this, ALL the draggable elements are referenced. So they all get enabled or disabled. Which I think is strange, as I would expect the $watch to look for the enabled value inside the scope for each draggable element. My goal is to enable/disable the draggable element individually. So I need a way to set/reference the enabled property for each draggable element in the controller.

Answer 1

You can change the directive to have it's own scope:

App.directive('draggable', function () {
    return {
        restrict: 'A',
        scope: { 
            enabled: '='
        },
        link: function (scope, element, attrs) {
            element.draggable();

            scope.$watch('enabled', function (val) {
                element.draggable(val === true ? 'enable' : 'disable');

            });
        }
    };
});

To have your controller control each individual directive you would need to have a corresponding configuration for each directive:

App.controller('TypeAheadController', function ($scope) {
    $scope.draggableItems = [{enabled:true},{enabled: true}];
});

and in your HTML:

<div ng-repeat="draggable in draggableItems" draggable enabled="draggable.enabled"></div>