Question

我需要调用一些现有的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>

我的其他绑定工作正常。但是，我无法弄清楚如何将订单ID传递给我现有的JavaScript函数。我该怎么做？

谢谢！

Answer 1

您可以注入$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>

或者你可以添加

$scope.confirmDelete = function(id) {
    return window.confirmDelete(id);
}

然后你可以这样做：

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

或者您可以为任何全局函数创建传递方法：

$scope.callGlobal(fn, params) {
    if (!angular.isArray(params)) {
        params = [params];
    }
    return window[fn].apply(window, params)
}

其中包含函数名称和一个params数组（或者，如果只有一个参数，则只能传递参数），然后就可以了

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

Answer 2

而不是

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

试

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

我做了一个fiddle，虽然你应该像我一样使用全局

根据迈克的说法更新了fiddle

Answer 3

使用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：http://plnkr.co/edit/p8Bm0WI7skVZFH3rhTun?p=preview

另外，你实际上可以离开href =＆＃34; ...＆＃34; out并处理控制器功能中的视图更改。

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

3 个答案: