看起来很简单,但我不能从我的指令中获得$ event.当test被调用时cb-click,$event是未定义的,但在指令之外(通过html),它是事件对象.
如果我使用链接功能(不包括在我的小提琴中),我可以得到$event,但我不能$ parse/$ eval它在正确的范围内.
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 …我有一个具有局部范围的指令,其中部分包含ng-click.
小提琴就在那里:http://jsfiddle.net/stephanedeluca/QRZFs/13/
不幸的是,由于我将代码移动到指令中,因此ng-click不再触发.
控制器和指令如下:
var app = angular.module('myApp', ['ngSanitize']);
app.directive('plantStages', function ($compile) {
return {
restrict: 'E',
transclude: true,
template: '<figure class="cornStages">\
<p ng-transclude style="color: skyblue"></p>\
<hr/>\
<p ng-bind-html="title"></p>\
<p ng-bind-html="subtitle">{{subtitle}}</p>\
<ul>\
<li ng-repeat="stage in stages" ng-click="changePage(stage)">{{stage}}</li>\
</ul>\
</figure>',
scope: {
stages:"=",
title:'@'
},
link: function (scope, element, attrs, ctrl, transclude) {
if (!attrs.title) scope.title = "Default title";
}
};
});
app.controller('myCtrl', function ($scope, $location, $http) {
$scope.stages = ['floraison', 'montaison'];
$scope.changePage = function (page) {
var …