javascript - angularjs绑定 ng-click问题

问题描述

问 题

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

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

为什么会提示错误

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

解决方案

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

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>

这样子应该可以喽。

这篇关于javascript - angularjs绑定 ng-click问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！