H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】angularjs绑定 ng-click问题

我在服务中提供了一个数组供页面repeat
clipboard.png
其中的click是我想给每个按钮加的事件
我在按钮上这样遍历
clipboard.png
为什么会提示错误
clipboard.png

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

回答:

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

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>

这样子应该可以喽。

回答:

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

回答:

这样写怪怪的,也许是你换了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()">

回答:

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

本文地址:H5W3 » 【Web前端问题】angularjs绑定 ng-click问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址