使用 Angular 提交投票并锁定

Question

我有以下内容来显示图像列表（使用 Angular）：

  var application = angular.module('Application', []);

  application.controller('ImageController', function ImageController($scope, $http) {

    $http.get('api/images').
      success(function (data, status, headers, config) {
        $scope.images = data;
      }).
      error(function (data, status, headers, config) {
      });

  });

</script>

<div data-ng-app="Application" data-ng-controller="ImageController" class="gallery">
  <div data-ng-repeat='image in images' class="image">
    <img src="{{image.Url}}" alt="" />
    <div class="overlay">
      <a href="#">VOTE</a>
      <span>{{image.Votes}}</span>
      <a href="#">LOCK</a>
    </div>
  </div>
</div>

图像按预期显示，但我想：

点击 link 投票后调用 "api/vote/{{image.id}}"；
点击 link LOCK 时调用 "api/lock/{{image.id}}"；

我想两个 link 都应该在一个表单中？没有？

我该怎么做？有人可以帮帮我吗？

更新

我按照 Dieter 的建议尝试了以下方法：

    <div class="overlay">
      <a ng-click="vote(image)" href="#">VOTE</a>
      <span>{{image.Votes}}</span>
    </div>

    $scope.vote = function (image) {

      $http.post('api/images/' + image.Id + '/vote', { id: image.Id }).
        success(function (data, status, headers, config) {
          alert("success");
        }).
        error(function (data, status, headers, config) {
          alert(data);
          alert(status);
        });

    };

有了这个我得到了一个错误的请求......如果我尝试：

    $http.post('api/images/2/vote', { id: image.Id }).

然后就可以了...

我查了一下 image.Id 等于 2。知道为什么它不起作用吗？

我不知道如何创建带有参数的路径。

Answer 1

将 ng-click 添加到您的链接

<div class="overlay">
      <a ng-click="vote(image)" href="#">VOTE</a>
      <span>{{image.Votes}}</span>
      <a ng-click="lock(image)" href="#">LOCK</a>
    </div>

然后在您的控制器中，您可以在点击函数中添加所需的 API 调用

application.controller('ImageController', function ImageController($scope, $http) {
    $scope.vote = function (image) {
        // image.id is available here
    };

    $scope.lock = function (image) {
        // image.id is available here
    };

    $http.get('api/images').
      success(function (data, status, headers, config) {
        $scope.images = data;
      }).
      error(function (data, status, headers, config) {
      });

  });

同时尽量避免在控制器内部调用 http`。使用 Angular 服务进行抽象。看看 John Papa 的 styleguide，怎么推荐都不为过！

使用 Angular 提交投票并锁定

Submit vote and lock using Angular

angularjs