Keep Track Of Object Ids Properly After Creating Elements With Ng-repeat

I have created a list of items with an object inside my controller $scope.devices = [ {'id': 0, 'name': 'sw', 'class': 'sw' }, {'id': 1, 'name': 'mlr', 'class': 'mlr'},

Solution 1:

The ng-repeat directive creates a scope for each line that it adds to the DOM. On each scope will be special properties set by ng-repeat.

From the Docs:

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

The scope inherits from $parent scope. In your directive's linking function, you can use scope.$parent.devices[scope.$index] to access the original but it is also on the local scope as well.

For more information see the AngularJS ngRepeat API Reference.

Update with example

This example shows the directive getting the $index and also emitting a custom event for the controller to use.

The directive

ums.directive('draggable', function (){
    function postLinkFn (scope, elem, attr){
        console.log("instantiating directive");

        elem.prop('draggable', true);

        elem.on ('dragstart',
            function(e) {
                elem.addClass('drag');
                console.log("dragstart index =", scope.$index);
                //emit event for controller
                scope.$emit("umsDragstart", e);
                return false;
            }
        );
    }
    return postLinkFn;
})

In the controller

    $scope.$on("umsDragstart", function ($event, rawEvent){ 
         console.log($event);
         console.log(rawEvent.x, rawEvent.y);
         console.log("umsDragstart id =", $event.targetScope.device.id);
    });

Notice that the example uses jqLite methods on the elem parameter of the postLinkFn. Those methods are documented in the AngularJS angular.element API Reference.

The $on and $emit methods are documented in the AngularJS $rootScope.scope API Reference - $on and API Reference - $emit.

Solution 2:

If you are using the directive inside the controller in which selected() function is written the you can assign the id to some scope variable and access it in directive. else if you are using the directive inside a ng-repeat then you can set custom scope variable for directive and pass the current id to it. or else give away a code example