How do I get $emit to controller from directive built html

Question

I'm having difficulty figuring this out. I have a directive building html from promise data. For each row, it's adding buttons for CRUD operations. I do not know how to get the button event to trigger in my controller. Regardless of how my controller is set up, how can I get the event to register in my controller? I am currently trying $emit, but nothing seems to happen.

Directive generated html:

controls = controls+'<button type="button" data-tooltip-placement="bottom" data-tooltip="'+action.name+'" ng-click="$emit(&apos;'+action.broadcaster+'&apos;,'+rowId+')" name="'+action.name+'" class="btn btn-xs btn-default ng-scope"><i class="'+action.icon+'"></i> </button>'

How it looks in Chrome tools:

<button type="button" data-tooltip-placement="bottom" data-tooltip="delete" ng-click="$emit('removeOrgCourse',134)" name="delete" class="btn btn-xs btn-default ng-scope"><i class="fa fa-trash-o"></i> </button>

and my controller listener:

$scope.$on('removeOrgCourse', function( event, data ){
     console.log(data);
});

UPDATE:
Just changed the ng-click to console.log("click") and nothing happened. So the issue is that ng-click is not registering;

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

Maybe you have to use $broadcast, depends if the controllers are on the same level or who's over who.

Working with $scope.$emit and $scope.$on

http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

in the secon link you can put the $emit and $broadcast in the same controller and see whad do you catch in you $on

edited May 23 '17 at 12:30

Community

1
1

answered Aug 12 '15 at 16:00

Alejandro Vales

2,816
22
41

In this case $emit was the correct option. The problem I have is ng-click and $compile not working. – Jason Spick Aug 13 '15 at 13:11

score 0 · Accepted Answer · answered Aug 12 '15 at 16:05

While you can use events in angular to achive that, one other option is to use & expression scope binding to pass controller method to directive. Example code (from egghead.io)(see working code at jsbin):

<div ng-app="phoneApp">
<!-- we've replaced the use of $scope with the preferred "controller as" syntax. see:http://toddmotto.com/digging-into-angulars-controller-as-syntax/ -->
<div ng-controller="AppCtrl as appctrl">
    <div phone dial="appctrl.callHome(message)"></div>
    <div phone dial="appctrl.callHome(message)"></div>
    <div phone dial="appctrl.callHome(message)"></div>
</div>

Controller:

    app.controller("AppCtrl", function() {
        var appctrl = this;
        appctrl.callHome = function(message) {
            alert(message);
        };
    });

And directive:

 app.directive("phone", function() {
        return {
            scope: {
                dial: "&"
            },
            template: '<input type="text" ng-model="value">' +
              '<div class="button" ng-click="dial({message:value})">Call home!</div>'
        };
    });

Your answer is correct, although it does not resolve my issue. I have found that my issue is related to ng-click and $compile. ng-click doesn't work at all, and when I $compile the html, it breaks other code. I think this has do specifically with jquery datatables. — Jason Spick, Aug 13 '15 at 13:14

How do I get $emit to controller from directive built html

2 Answers2