angular call controller function inside directive

Question

i am working on a mini contacts list and i am trying ot achieve a drag and drop effect. Right now i have a controller that brings me data from a DB and looks like this.

Index.controller('cIndex', function($scope, $http) {
    $scope.init = function() {
        $http.get('php/contacts.php').success(function(data) {
            $scope.jsonContactsList = data;
            $scope.jsonContactsDetail = [];
        });
    };
    $scope.init();

    $scope.listdetail = function(index) {
        alert(index);
    };
});

And this controller adds a list of contacts on the screen. I want to make that when i drag an item from the list and drop it outside the list, the item disapears from the list and appears as a detailed div about that specific contact.

Now i have 2 directives, 1 that makes the drag effect and 1 that makes the drop effect and they look like this.

Index.directive('contactListDrag', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            var options = scope.$eval(attr.contactListDrag);
            elem.draggable(options);
        }
    };
});

Index.directive('contactListDrop', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.droppable({accept: '.contact-list-item'});
            elem.bind('drop', function(event, ui) {
                var id = parseInt($(ui.draggable).attr('id'), 10);
                $scope.listdetail(id);
            });
        }
    };
});

Now inside the controller i have a function called listdetail, which i intend to make it change a line inside the jsonContactsList into jsonContactsDetail, but in order to do that, i need to call the listdetail function from the controller, inside the droppable contactListDrop directive.

Thank you in advance, Daniel!

$scope.listdetail(id); inside the second directive, does not trigger the $scope.listdetail = function(index) { alert(index); }; from the controller — Pacuraru Daniel
– Pacuraru Daniel, Commented Aug 31, 2013 at 12:29

Pacuraru Daniel · Accepted Answer · 2013-08-31 12:37:11Z

2

I found out the fix on this, i had to use scope.listdetail(id); without the dollar sign.

answered Aug 31, 2013 at 12:37

Pacuraru Daniel

1,2059 gold badges32 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

m.e.conroy · Accepted Answer · 2013-08-31 12:42:30Z

0

$scope is not available inside your directive. You need to tell your directive about its parent. Look at the section on Understanding Transclusion and Scope in the Angular docs here: http://docs.angularjs.org/guide/directive

scope: {
    var: '='
}

You could also scope.$emit an event from your directive and listen for it in the controller by using $scope.$on - I think this is the better solution since your directive wouldn't be tied to a controller having a certain function.

answered Aug 31, 2013 at 12:42

m.e.conroy

3,53828 silver badges28 bronze badges

1 Comment

Chandermani Over a year ago

Not correct, scope is available, if it is not isolated scope. He just had a typo :)

Collectives™ on Stack Overflow

angular call controller function inside directive

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related