How do I access controller function from directive AngularJs?

Question

On the main scope, I have a ng-repeat running.

<table class="datatable" prevent-right-click visible="isVisible">
                <tr ng-repeat="t in templateData">
                    <td confusedFunction="clickedonname(t)">{{t.templateName}}</td>
                    <td>{{t.templatePath}}</td>
                </tr>
            </table>

The prevent-right-click is a custom contextmenu which has a comment box in it, which takes comments on the respective right click element on the first td element. Is there anyway I can write a function which takes the repeated element, and passes in the directive, so that the comment can be recorded on the respective element? Also, the prevent-right-click has an isolated scope.

This is how my directive code is.

app.directive('preventRightClick', function() {
    return {
        restrict: 'A',
        scope: {
            visible: '='
        },
        link: function($scope, $ele) {
            $ele.on('contextmenu', '*', function(e) {
                e.preventDefault();
                $scope.$apply(function () {
                    $scope.visible = true;
                    $('.parented').css({right:50, top:50}).show();
                })
                e.stopPropagation();
            });

            $(document).on('click', '*', function (e) {
                if ($(e.target).parents('.parented').length  > 0) {
                }
                else{
                    $('.parented').hide()
                    $ele.off('contextmenu', '*', function(){
                        console.log('Context menu off')
                    })
                }
            })
            $scope.confusedFunction = function(t){
                console.log(t.templateName)
                console.log('coming from clickedonname')
            }
        }
    };
})

You want that the <td> receiving a click send the information to preventRightClick directive right ? — Julien TASSIN
– Julien TASSIN, Commented Mar 8, 2017 at 20:23
Yes, but it should pass the (t) as the argument. I need the repeated object in the directive. @JulienTASSIN — Aijaz
– Aijaz, Commented Mar 8, 2017 at 20:26
If so, I guess that one first way is to $broadcast an event in the controller function to the $rootScope with the corresponding $on in the directive. — Julien TASSIN
– Julien TASSIN, Commented Mar 8, 2017 at 20:31
I cannot use $rootScope since this will be part of a very big enterprise app. I have just written plain code, to understand the logic to do it. — Aijaz
– Aijaz, Commented Mar 8, 2017 at 20:32
A second way can be using an attribute that you will attrs.$observe in the directive and modify it's value in the controller function — Julien TASSIN
– Julien TASSIN, Commented Mar 8, 2017 at 20:33

Julien TASSIN · Accepted Answer · 2017-03-08 21:21:10Z

0

Here is a simple example for the second way :

HTML :

<table class="datatable" prevent-right-click visible="isVisible" foo=current.selected ng-init="current = {}">
  <tr ng-repeat="t in templateData">
    <td ng-click="current.selected = t">{{t.templateName}}</td>
    <td>{{t.templatePath}}</td>
  </tr>
</table>

Directive JS :

app.directive('preventRightClick', function() {
    return {
        restrict : "A",
        scope: {
          foo: '=foo',
        },
        link : function (scope, element, attrs) {
          scope.$watch('foo', function(n) {
            // This code will be triggered with the new t in new value on each td click
          })

    }
  };
});

answered Mar 8, 2017 at 21:21

Julien TASSIN

5,2422 gold badges27 silver badges40 bronze badges

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

2 Comments

Aijaz Over a year ago

Hey, thanks. But how do I pass the t(from the ng-repeat) value in the function? I need that one.

Julien TASSIN Over a year ago

Hello, the t is passed in current.selected from the ng-repeat to the directive. You can affect it in the watch function and use it the directive.

Collectives™ on Stack Overflow

How do I access controller function from directive AngularJs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related