如何从指令构建的 html 中获取 $emit 到控制器答案

【问题标题】：How do I get $emit to controller from directive built html如何从指令构建的 html 中获取 $emit 到控制器
【发布时间】：2015-08-12 15:54:42
【问题描述】：

我很难弄清楚这一点。我有一个从承诺数据构建 html 的指令。对于每一行，它都为 CRUD 操作添加按钮。我不知道如何让按钮事件在我的控制器中触发。不管我的控制器是如何设置的，我怎样才能让事件在我的控制器中注册？我目前正在尝试$emit，但似乎没有任何反应。

指令生成的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>'

它在 Chrome 工具中的外观：

<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>

和我的控制器监听器：

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

更新：
只是将 ng-click 更改为 console.log("click") 并没有发生任何事情。所以问题是 ng-click 没有注册；

【问题讨论】：

标签： javascript angularjs dom-events

【解决方案1】：

虽然您可以使用 Angular 事件来实现这一点，但另一种选择是使用 & 表达式范围绑定将控制器方法传递给指令。示例代码（来自egghead.io）（参见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>

控制器：

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

和指令：

 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>'
        };
    });

【讨论】：

你的回答是正确的，虽然它不能解决我的问题。我发现我的问题与 ng-click 和 $compile 有关。 ng-click 根本不起作用，当我编译 html 时，它会破坏其他代码。我认为这与 jquery 数据表有关。

【解决方案2】：

也许您必须使用 $broadcast，这取决于控制器是否处于同一级别或谁在谁之上。

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

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

在第二个链接中，你可以将 $emit 和 $broadcast 放在同一个控制器中，看看你在 $on 中捕获了什么

【讨论】：

在这种情况下，$emit 是正确的选项。我遇到的问题是 ng-click 和 $compile 不起作用。