Javascript 如何处理指令和控制器中的模板ng单击？

我有一个带有模板的指令（基本上是两个按钮，点击它们）

app.directive（'foo'，function（）{
返回{
范围：{
onNext:“=”，
上一次单击：=“
},
限制：“E”，
模板：“上一个下一个”，
链接：功能（$scope）{
$scope.onPreviousClick=函数（）{
log（“指令中的Prev click事件”）；
}
$scope.onNextClick=函数（）{
log（“来自指令的下一次单击事件”）；
}
}
}
});

现在，当我使用该指令时，我想设置click处理程序在控制器中执行工作

<foo on-previous-click="ctrl.onPreviousClick($event)"></foo>

app.controller("myController", function($scope){

    this.onPreviousClick = function(){
       console.log("Prev click from the controller.");
    }

});

app.controller（“myController”，函数（$scope）{
this.onPreviousClick=函数（）{
log（“上一次从控制器单击”）；
}
});

基本上，我希望click事件“通过”指令和控制器。我希望两个事件处理程序都为上一个按钮单击触发

---

但我只能让一个或另一个点击处理程序工作。如果我注释掉我的指令处理程序，控制器工作，反之亦然

理想情况下，您应该使用函数绑定

&

而不是双向绑定，并且只需从指令处理程序调用即可

return {
    scope: {
        onNext: "&",
        onPreviousClick: "&"
    },

并通过键值对将事件传递给绑定处理程序，即

    $scope.onPrev({$event: $event });

因此，您可以在链接函数中执行此操作：

 $scope.onPrevClick = function($event) {
    console.log("Prev click event from directive");
    $scope.onPrev({
      $event: $event
    });
  }

或者在模板本身上

 <button ng-click='onPrevClick($event);onPrev({$event:$event})'>Prev</button>

Prev

演示

angular.module（'app'，[]）.controller（'ctrrl'，function（$scope）{
this.onPreviousClick=函数（）{
log（“上一次从控制器单击”）；
}
this.onNextClick=函数（）{
log（“从控制器单击下一步”）；
}
}).directive（'foo'，function（）{
返回{
范围：{
onNext:“&”，
onPrev:“&”
},
限制：“E”，
模板：“上一个下一个”，
链接：功能（$scope）{
$scope.onPrevClick=函数（$event）{
log（“指令中的Prev click事件”）；
$scope.onPrev({
$event:$event
});
}
$scope.onNextClick=函数（）{
log（“来自指令的下一次单击事件”）；
}
}
}
});;

在$scope.onPrevClick中调用控制器方法有什么问题？@Karthik-考虑过这样做，但我想知道是否有更“首选”的方法来这样做。将指令方法和控制器方法封装到函数中如何？我同意PSL刚刚发布的答案。这是正确的方法我想没有办法把这两个事件处理程序命名为完全相同的，是吗？这是唯一的警告吗？@Matt你不应该这样做，因为指令定义了合同，你可以很容易地控制它。控制器中处理程序的名称并不重要。重要的是，作用域上的函数绑定名称和您在指令中定义的处理程序不能具有相同的名称，因为一个将覆盖另一个。
 <button ng-click='onPrevClick($event);onPrev({$event:$event})'>Prev</button>