AngularJS从指令得到$事件 [英] AngularJS getting $event from a directive

问题描述

好像pretty简单，但我不能得到$事件冒泡从我的指令。当测试会从叫CB-点击， $事件是不确定的，但指令（通过HTML）之外，它的事件对象。

如果我用一个连接功能（不包括在我的小提琴），我可以得到 $事件，但我$解析/ $的eval它反对权利不能范围。

http://jsfiddle.net/langdonx/KgcGY/

 ＆LT; D​​IV NG-应用=应用程序NG控制器=X＆GT;
    ＆LT;！ - 通过指令 - ＆GT;
    ＆LT;复选框CB-模式=YCB-点击=测试（$事件，二）＆GT;＆LT; /复选框＆GT;
    ＆LT;！ - 通过HTML  - ＆GT;
    ＆所述; DIV＆GT;＆下;输入的id =C2类型=复选框纳克模型=×纳克点击=测试（$事件，'一个'）＆GT; ＆LT;标签=C2＆GT; {{X}}＆LT; /标签＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

-

  VAR应用= angular.module（'应用'，[]）;app.directive（复选框，函数（$解析）{
    返回{
        限制：'E'，
        更换：真实，
        范围： {
            cbModel：'='，
            cbClick：'和;'
        }，
        模板：'＆LT; D​​IV＆GT;＆LT;输入ID =C1类型=复选框NG模型=cbModelNG点击=cbClick（$事件，\\'A \\'）＆GT; ＆LT;标签=C1＆GT; {{cbModel}}＆LT; /标签＆gt;＆LT; / DIV＆GT;'
    };
}）;app.controller（'X'，函数x（$范围）{
    $ scope.x = TRUE;
    $ scope.y = TRUE;
    $ scope.test =功能（EV，B）{
        的console.log（'测试调用，EV是'，EV，'b为'，B）;
        返回XYZ;
    }
}）;
 

解决方案

您需要使用您的指令，这里面的语法：

  NG-点击=cbClick（{EV：$事件，B：\\'A \\'}）
 

使用此HTML：

  CB-点击=测试（EV，二）
 

小提琴

从指令页面，部分指令定义对象

  

通常是期望通过一个前pression和到母体范围从分离的范围传递数据，这可以通过使地图的局部变量的名称和值的进入前pression包装FN来完成。例如，如果EX pression是增量（量）那么我们就可以通过调用 localFn 为 localFn（{量：22}）

Seems pretty simple, but I can't get $event to bubble up from my directive. When test gets called from cb-click, $event is undefined, but outside of a directive (via html), it's the event object.

If I use a linking function (not included in my fiddle), I can get $event, but I can't $parse/$eval it against the right scope.

http://jsfiddle.net/langdonx/KgcGY/

<div ng-app="app" ng-controller="x">
    <!-- via directive -->
    <checkbox cb-model="y" cb-click="test($event, b)"></checkbox>
    <!-- via html -->
    <div><input id="c2" type="checkbox" ng-model="x" ng-click="test($event, 'a')"> <label for="c2">{{x}}</label></div> 
</div>

-

var app = angular.module('app', []);

app.directive('checkbox', function ($parse) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            cbModel: '=',
            cbClick: '&'
        },
        template: '<div><input id="c1" type="checkbox" ng-model="cbModel" ng-click="cbClick($event, \'a\')"> <label for="c1">{{cbModel}}</label></div>'
    };
});

app.controller('x', function x($scope) {
    $scope.x = true;
    $scope.y = true;
    $scope.test = function (ev, b) {
        console.log('test called, ev is', ev, 'b is', b);
        return 'xyz';
    }
});

解决方案

You need to use this syntax inside your directive:

ng-click="cbClick({ev: $event, b:\'a\'})

With this HTML:

cb-click="test(ev, b)"

Fiddle

From the directives page, section "Directive Definition Object":

Often it's desirable to pass data from the isolated scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22})

这篇关于AngularJS从指令得到$事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！