angularjs绑定 ng-click问题

Question

我在服务中提供了一个数组供页面repeat

其中的click是我想给每个按钮加的事件
我在按钮上这样遍历

为什么会提示错误

之前在做移动端的时候也是这样做的，但没有出现这样的问题

Answer 1

给个一般的解决方案，首先你在控制器中定义一个函数：

function btnAction(flag) {
    if('add' === flag) {
        // TODO
    }
    else if('delete' === flag) {
        // TODO
    }
    ...
}

你给循环的每一项添加一个相同的函数就是btnAction()，然后给这个函数传递不同的参数flag，然后根据不同的参数，做出不同的判断。当然参数也可以循环的每一项的$index。

---

刚才想了一下，如果你确实想使用这种办法的话，也不是没有解决方法，可以使用angular的$scope.$eval([expression], [locals]);，这个方法的作用就是在当前作用域内，运行expression表达式，并把这个表达式的结果返回。

因为的你这些函数还有那个循环的数组是写在服务中的，并且你使用了controllerAs语法，所以要在控制器中添加对那些函数的引用，大概是下面这个样子的。

JavaScript:

(function() {
    angular.module('MyApp', [])
        .service('MyService', MyService)
        .controller('MainController', MainController);

    MyService.$inject = [];
    MainController.$inject = ['MyService', '$scope'];

    function MyService() {
        var service = {
            add: add,
            del: del
        };
        return service;

        function add() {
            alert('add action!');
        }

        function del() {
            alert('del action!');
        }
    }

    function MainController(MyService, $scope) {
        var vm = this;
        vm.myApply = myApply;
        vm.ctrlClick = ctrlClick;
        vm.add = MyService.add;
        vm.del = MyService.del;

        vm.items = [
            {name: '控制器中的', click: 'vm.ctrlClick()'},
            {name: '添加', click: 'vm.add()'},
            {name: '删除', click: 'vm.del()'}
        ];

        function myApply(expr, locals) {
            return $scope.$eval(expr, locals);

        }

        function ctrlClick() {
            alert(1);
        }
    }

})();

HTML:

<div ng-app="MyApp">
    <div ng-controller="MainController as vm">
        <ul>
            <li ng-repeat="v in vm.items">
                <button ng-click="vm.myApply(v.click, v)">{{v.name}}</button>
            </li>
        </ul>
    </div>
</div>

这样子应该可以喽。

Answer 2

把 button 上面 ng-lcick="{{btn.click}}" 里面的 {{ 和 }} 去掉试试

Answer 3

这样写怪怪的，也许是你换了Angular版本，然后angular为了安全原因不允许你这样做了。
从理论上来说，ng-click里的内容只能是Angular表达式，{{}}这样的东西只能当做模板来用。
建议你直接在toolButtons中click属性直接引用函数 例如：

var toolButtons = [
   {name: '添加', icon:'icon-zengjia', class:'col-xs-1', click: $scope.FormDesign.addClick} 
];

然后在html中

<button type="button" ng-repeat="btn in FormDesign.toolButtons" ng-click="btn.click()">

Answer 4

个人建议不要写那么多的函数 直接调用同一个函数 然后使用$index作为参数传入来区分或者使用repeat的当前对象来区分 类似于楼上所说的将V作参数传入