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

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)
}

它采用函数名和参数数组（或者，如果只有一个参数，则可以只传递该参数），然后可以执行

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

Answer 2

使用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="…"，并在控制器函数中处理视图更改。

Answer 3

而不是

<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>

我做了一把小提琴，尽管你应该像我做那样使用全局

根据Mike所说的，更新了小提琴