javascript - 从动态创建的 HTML 调用 Controller 函数

Question

我有一个 Controller ，它有一个名为 $scope.removePoster 的函数，同一 Controller 内的另一个函数创建了一个调用 $scope.removePoster 的表，如下所示:

for(var i=0; i < 6 && postersNum >= 0; i++){
  ...
  table += '<td align="center">';
  table += '<img width="150" height="175" src="../js/librerias/carousel/images/'+$scope.posters[indexPosters]['image']+'"><br>';
  table += '<button type="button" class="btn btn-danger" ng-click="removePoster('+$scope.posters[indexPosters]['id']+')">Delete</button>';
  table += '</td>';
  ...

当我在 HTML 中添加此表时，按钮不会调用此函数。

Answer 1

听起来你正在使用这样的东西:

<!-- HTML -->
<table>
    <tr ng-repeat="poster in posters | limitTo: 6">
        <td align="center">
            Poster {{poster.id}}
            <img width="15" height="18" 
                 ng-src="../js/librerias/carousel/images/{{poster.image}}" />
            <button type="button" class="btn btn-danger" 
                    ng-click="removePoster(poster.id)">
                Delete
            </button>
        </td>
    </tr>
</table>

// Controller:
$scope.posters = [];
$scope.getPosters = function (url) {
    $http.post(url, {'method' : 1}).success(function (data, status) {
        $scope.posters = data;
    });  
};
$scope.removePoster = function (id) {
    $scope.posters.some(function (poster, idx) {
        if (poster.id === id) {
            $scope.posters.splice(idx, 1);
            return true;
        }
    });
};

<小时/>

另请参阅此 short demo 。

<小时/>

一些亮点:

1. 通过使用ngRepeat关于<tr>元素，我们指示 Angular 创建尽可能多的 tr根据 posters 的内容添加必要的元素(需经过过滤(见下文))。

2. Angular 的内置 limitTo过滤器，过滤器是posters数组并仅使前 6 项可用于 ngRepeat 。足够方便，当 posters 的内容数组更改(例如，删除条目后)，整个表达式将根据需要重新评估创建或删除 DOM 节点。

<小时/>

重要

上面的实现不是处理各方面问题的正确方法。这是最干净/最简单的方式，让您了解 Angular 动态构建表格的方式。

具体来说，在“现实世界的应用程序”中，您应该有一个服务从服务器获取数据并将该服务注入(inject) Controller 以使其能够访问数据。