angular directive in directive parent click

Question

I'm creating a directive to show differences in text. For this directive, I need a couple of buttons which I've split up in directives. A simpliefied example would be:

.directive('differenceViewer', function($templateCache, $compile) {
      return {
        restrict: 'E',
        scope: {
            oldtext: '@',
            newtext: '@',
            template: '@',
            heading: '@',
            options: '=',
            itemdata: '&',
            method: '&'
        },
        replace: false,
        link: (scope, element, attr) => {
            element.append(angular.element($compile($templateCache.get(scope.template))(scope)));
        }
    };
}).directive('diffbutton', function() {
  return {
        restrict: 'E',
        scope: {
            method: '&'
        },
        template: '<button class="btn btn-sm btn-success" ng-click="method()">Rollback</button>',
        replace: true,
        terminal: true,
        link: (scope, element, attr) => {
            scope.directiveClick = function(){
                console.log("directive method"); // is never called
            }

        }
    }
})

I compile the html via a template script:

<script type="text/ng-template" id="differenceViewer.html">
    <div class="ibox-footer">
      <div class="row">
        <div class="col-md-12">
            <diffbutton method="clickedBtn()">Foo</diffbutton>
        </div>
      </div>
    </div>
</script>

Where the diffbutton is created inside the html compiled by differenceViewer.

I need to call a method in the controller that is responsible for creating all the difference-views.

app.controller('MainCtrl', function($scope) {
  $scope.clickedBtn = function() {
    console.log('foo'); // is never called
  }
})

Here's a plunker demonstrating the issue.

What do I need to change in order to be able to forward the button click on my directive in a directive to the controller method?

I've been working with the answers of this question but still can't make it work.

Note that, if I add

scope.clickedBtn = function() {console.log("bar");}

to the differenceViewer directive, it gets called - however I need to call the method in the controller instead.

The problem that you don't pass method to differenceViewer, but you use clickedBtn inside differenceViewer that are not defined in the scope — BotanMan
– BotanMan, Commented Aug 4, 2017 at 12:42
No @BotanMan if I define clickedBtn in differenceViewer it works, it doesn't work to pass the event to the controller — baao
– baao, Commented Aug 4, 2017 at 12:44
Here is the correct way plnkr.co/edit/yiJ1S25FH2EPCtoO9nKo?p=preview — BotanMan
– BotanMan, Commented Aug 4, 2017 at 12:46

Vic · Accepted Answer · 2017-08-04 12:46:33Z

2

Pass on a method from the parent to the child element and then trigger it on click. For example (pseudo code coming in )

<parent-directive>
   <child-directive totrigger="parentClickCallback()"></child-directive>
</parent-directive>

then in your parent directive you set

$scope.parentClickCallback = function(){//do whatever you neeed}

and on your child in its scope binding you set

scope:{
   totrigger:'&'
}

and on that child button you simply add

<button ng-click="totrigger()">ClickMe</button>

every time you click that button it will trigger parentClickCallback by reference attached to totrigger.

Why would you need to complicate your code so much I'm not really sure. If you not happy with scope binding just require controller in your directive and pass the controller bound function.

answered Aug 4, 2017 at 12:46

Vic

4244 silver badges7 bronze badges

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

1 Comment

Leonardo Chaia Over a year ago

You can also add parameters like toTrigger({$param1: foo}) then parentClickCallback($param1)

Collectives™ on Stack Overflow

angular directive in directive parent click

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related