Angular.js — Directive to controller communication

Question

I am very new to angular so please excuse my lack of understanding.

I have a directive called "draggable" which I want to be able to track the x position of and perform some logic on it in the controller. When the user drags the element (a stick figure) to the right, additional stick figures should appear directly behind it. The controller should know the x position and based upon where it is, increment a counter which will dictate how many stick figures appear behind the draggable element.

This code does not currently work as the controller does not have receive the value of x.

My directive:

app.directive('draggable', function() {
    return {
        restrict: 'A',
        scope: "=x",
        link: function (scope, element, attrs) {
            $(element).draggable({
                containment: "parent",
                axis: "x",
                drag: function(){
                    scope.x = $(this).offset().left;
                }
            });
        }
    };
});

My controller:

app.controller("main-controller", function($scope) {
    $scope.range = function(n) {
        return new Array(figures);  
    };
    $scope.$watch("x", function(){
        console.log($scope.x);
        figures = x / (stick_figure_height)
    });
});

My HTML:

<div class="human-slider" ng-controller="main-controller">
    <div draggable class="human-draggable">
        <img src="images/stickfigure.png"/>
    </div>
    <div ng-repeat="i in range()">
        <img src="images/stickfigure.png"/>
    </div>
</div>

Answer 1

The reason the controller was not picking up the updated value of x from the draggable directive was because of where the value of x is being updated. X is updated in a turn that has been created in a method outside of the angularJS library (the drag event handler). The solution to this problem was to use $.apply which will update the binding.

The updated code:

// Create our angular app
var app = angular.module('celgeneApp',[]);


// Main controller 
app.controller("main-controller", function($scope) {
    $scope.x = 0;
    $scope.figures = 0;
    $scope.range = function(n) {
        return new Array($scope.figures);  
    };
    $scope.$watch('x', function(){console.log($scope.x);});
});

// Draggable directive
app.directive('draggable', function() {
    return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrs) {
            $(element).draggable({
                containment: "parent",
                axis: "x",
                drag: function(){
                    // Need to use $apply since scope.x is updated 
                    // in a turn outside a method in the AngularJS library.
                    scope.$apply(function(){scope.x = element.offset().left;});
                }
            });
        }
    };
});

Answer 2

You can communicate between a directive and a controller through a service. A directive can also access a controller's scope variables via parameters. You can access the variables in different ways, depending on your needs:

• As just text with the @ prefix
• With a one way binding with the & prefix
• With a two bay binding with the = prefix

Check out this excellent article about directives, especially the scope section

Take a look at this directive I made, it is just a wrapper around jQuery's draggable just like yours, maybe you can get some ideas:

angular-draggable

Answer 3

Check my this for how parent controller and directive communicates :)

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