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

另请参阅此 short demo 。

一些亮点：

在ngRepeat元素上使用<tr>，我们会根据tr的内容指示Angular根据需要创建尽可能多的posters个元素。过滤（见下文））。
Angular的内置limitTo过滤器，过滤了posters数组，只使前{6}项可用于ngRepeat。足够方便的是，当posters数组的内容发生更改时（例如，在删除条目之后），将重新评估整个表达式，以根据需要创建或删除DOM节点。

重要

上面的实现不是处理各方面事情的正确方法。这是一种最干净/最简单的方法，让您可以围绕Angular动态构建表的方式。

具体来说，在一个真实世界的应用程序中，你应该有一个服务从服务器带来数据并将服务注入控制器，让它获得对数据的访问。

从动态创建的HTML调用控制器函数

1 个答案: