从HTML动态创建的调用控制器功能

Question

我有一个控制器，它有一个名为函数$scope.removePoster和另外一个谁创建表调用同一个控制器内$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;
        }
    });
};

---

另请参见此简短演示 。

---

一些重点：

1. 通过使用ngRepeat的上<tr>元素，我们指示角来创建任意数量的tr基于所述内容元素作为必要posters （受滤波（见下文））。

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

---

重要

上面的实现并不是处理所有方面的正确方法。 这是最干净/轻松的方法，可让您围绕Angular动态构建表的方式进行工作。

具体来说，在“真实世界的应用程序”中，您应该有一个服务，该服务将来自服务器的数据带入服务器，并将该服务注入控制器，以使其能够访问数据。