Question

我有一个带有模板的指令，用于显示人员表（姓名，国籍，日期和按钮详情）。单击按钮详细信息并显示警报。问题是我不知道如何使按钮的ng-click在指令内的ng-repeat中工作。他们告诉我对指令使用以下配置，使用控制器中的show函数进行ng-click：

$each

控制器：

angular.module('app', []).directive('persons', function() {
    return {
        restrict: 'E',
        scope: {
            data: '=',
            action: '&'
        },
        template: '...'
    };
});

所以我添加了以下模板：

angular.module('app', []).controller('labController', [function() {
    var vm = this;

    vm.persons = [{
        name: 'Mark Twatin',
        nationality: 'American',
        dates: '1835-1910'
    }, {
        name: 'A. A. Milne',
        nationality: 'English',
        dates: '1882-1956'
    }, {
        name: 'Ernest Hemingway',
        nationality: 'American',
        dates: '1899-1961'
    }, {
        name: 'Charles Dickens',
        nationality: 'English',
        dates: '1812-1870'
    }, {
        name: 'Jane Austen',
        nationality: 'English',
        dates: '1775-1817'
    }];

    vm.show = show;

    function show(person) {
        alert('Show details for: ' + person.name);
    }
}]);

HTML：

<table class="table">
    <thead>
        <th>Name</th>
        <th>Nationality</th>
        <th>Dates</th>
        <th></th>
    </thead>
    <tbody>
        <tr ng-repeat="person in data">
            <td>{{person.name}}</td>
            <td>{{person.nationality}}</td>
            <td>{{person.dates}}</td>
            <td>
                <input 
                    type="button" 
                    ng-click="action(person)" 
                    value="Details" 
                    class="btn btn-primary"
                />
            </td>
        </tr>
    </tbody>
</table>

那么，如何让按钮详情工作？

我创造了以下小提琴：http://jsfiddle.net/6xyztpxt/3/

Answer 1

您需要在ngClick的指令内更改您的电话。

在指令中，如果要使用参数调用绑定函数，则需要将带有参数的对象传递给它。

将模板中的ng-click更改为：ng-click="action({person: person})" 也就是说，使用action中具有当前person值的参数person来调用ngRepeat有界函数。

然后你需要将你的控制器show函数绑定到指令，如下所示：

    <persons data="vm.persons" action="vm.show(person)"></persons>

这意味着，将vm.show函数作为action绑定到指令，并在调用时将参数person传递给它。

我更新了你的小提琴：http://jsfiddle.net/gmm8a06q/1/

Answer 2

我对你的小提琴进行了一些改动。我已将操作的指令范围更改为＆＃39; =＆＃39;，因此您可以直接访问控制器方法＆＃34; show＆＃34;。

scope: {
        data: '=',
        action: '='
    },

http://jsfiddle.net/6xyztpxt/6/

在指令中单击ng-repeat

2 个答案: