绑定AngularJS值以调用现有JavaScript函数

我需要调用一些现有的JavaScript。我现有的函数名为“confirmDelete”。为了便于演示，缩短的版本如下所示：

function confirmDelete(orderId) {
  return confirm('Are you sure you want to delete Order #"' + orderId + '"?');
}

<a href="~/order/delete/{{order.Id}}" onclick="return confirmDelete('{{order.Id}}');">delete order</a>

这个函数还有更多的功能。无论哪种方式，我都尝试这样调用此函数：

function confirmDelete(orderId) {
  return confirm('Are you sure you want to delete Order #"' + orderId + '"?');
}

<a href="~/order/delete/{{order.Id}}" onclick="return confirmDelete('{{order.Id}}');">delete order</a>

我的其他绑定正在工作。但是，我不知道如何将订单ID传递给现有的JavaScript函数。我该怎么做

---

谢谢大家!

您可以注入

$window

：

.controller('ExampleController', ['$scope', '$window', function($scope, $window) {
    $scope.window = $window;
});

然后你可以做：

<a href="~/order/delete/{{order.Id}}" ng-click="window.confirmDelete(order.Id);">delete order</a>

<a href="~/order/delete/{{order.Id}}" ng-click="confirmDelete(order.Id);">delete order</a>

然后你可以做：

<a href="~/order/delete/{{order.Id}}" ng-click="window.confirmDelete(order.Id);">delete order</a>

<a href="~/order/delete/{{order.Id}}" ng-click="confirmDelete(order.Id);">delete order</a>

它接受函数名和一个参数数组（或者，如果只有一个参数，可以只传递参数），然后

<a href="~/order/delete/{{order.Id}}" ng-click="callGlobal('confirmOrder', order.Id);">delete order</a>

而不是

<a href="~/order/delete/{{order.Id}}" onclick="return confirmDelete('{{order.Id}}');">delete order</a>

试一试

虽然你应该像我一样使用globals，但我做了一个

---

更新，正如Mike所说，使用ng click指令而不是非Angular onclick处理程序，并传递$event对象

在控制器中：

 $scope.confirmDelete = function(orderId, $event) {
   if (!confirm('Are you sure you want to delete Order #"' + orderId + '"?')) {
      $event.preventDefault();
   }
 }

然后，您可以在html中使用

     <a href="~/order/delete/{{order.Id}}" ng-click="confirmDelete(order.Id, $event)">delete order</a>

这是一个正在工作的Plunker：

---

此外，您实际上可以不使用href=“…”并在控制器函数中处理视图更改。

为什么不在范围中定义确认函数a并用ng click替换onclick？如果您不使用href=“…”并在控制器中处理更改，那么您根本不必处理$event对象，因为您不必处理阻止默认单击行为的问题。另一个澄清：仅当您的href=“…”是服务器路由，而不是角度路由（即href=“#something”vs.href=“~/something”，如您所示）时，才需要额外的$event对象代码。如果您正在执行服务器路由，如您在问题中所示，您必须防止在选择“取消”的情况下单击href。我认为这不起作用，因为当用户单击“取消”时，它不会抑制默认的单击行为。小提琴正在工作，因为href=“…”已从href=“~/order/…”更改为href=“#/{{item.id}”。如果您将href更改回服务器路由，它将遵循该路由。这将产生删除订单的效果，无论用户如何响应“您确定…”确认。哦，我明白了，这就是为什么您添加了preventDeault@迈克