84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我在服务中提供了一个数组供页面repeat其中的click是我想给每个按钮加的事件我在按钮上这样遍历为什么会提示错误
之前在做移动端的时候也是这样做的,但没有出现这样的问题
人生最曼妙的风景,竟是内心的淡定与从容!
给个一般的解决方案,首先你在控制器中定义一个函数:
function btnAction(flag) { if('add' === flag) { // TODO } else if('delete' === flag) { // TODO } ... }
你给循环的每一项添加一个相同的函数就是btnAction(),然后给这个函数传递不同的参数flag,然后根据不同的参数,做出不同的判断。当然参数也可以循环的每一项的$index。
btnAction()
flag
$index
刚才想了一下,如果你确实想使用这种办法的话,也不是没有解决方法,可以使用angular的$scope.$eval([expression], [locals]);,这个方法的作用就是在当前作用域内,运行expression表达式,并把这个表达式的结果返回。
angular
$scope.$eval([expression], [locals]);
expression
因为的你这些函数还有那个循环的数组是写在服务中的,并且你使用了controllerAs语法,所以要在控制器中添加对那些函数的引用,大概是下面这个样子的。
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>
这样子应该可以喽。
把 button 上面 ng-lcick="{{btn.click}}" 里面的 {{ 和 }} 去掉试试
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作参数传入
给个一般的解决方案,首先你在控制器中定义一个函数:
你给循环的每一项添加一个相同的函数就是
btnAction()
,然后给这个函数传递不同的参数flag
,然后根据不同的参数,做出不同的判断。当然参数也可以循环的每一项的$index
。刚才想了一下,如果你确实想使用这种办法的话,也不是没有解决方法,可以使用
angular
的$scope.$eval([expression], [locals]);
,这个方法的作用就是在当前作用域内,运行expression
表达式,并把这个表达式的结果返回。因为的你这些函数还有那个循环的数组是写在服务中的,并且你使用了
controllerAs
语法,所以要在控制器中添加对那些函数的引用,大概是下面这个样子的。JavaScript:
HTML:
这样子应该可以喽。
把
button
上面ng-lcick="{{btn.click}}"
里面的{{
和}}
去掉试试这样写怪怪的,也许是你换了Angular版本,然后angular为了安全原因不允许你这样做了。
从理论上来说,ng-click里的内容只能是Angular表达式,{{}}这样的东西只能当做模板来用。
建议你直接在toolButtons中click属性直接引用函数 例如:
然后在html中
个人建议不要写那么多的函数 直接调用同一个函数 然后使用$index作为参数传入来区分或者使用repeat的当前对象来区分 类似于楼上所说的将V作参数传入