javascript - angularjs绑定 ng-click问题
黄舟
黄舟 2017-04-11 10:58:12
0
4
365

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

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

为什么会提示错误

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

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

reply all(4)
大家讲道理

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

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:

<p ng-app="MyApp">
    <p 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>
    </p>
</p>

这样子应该可以喽。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!