84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
我在服务中提供了一个数组供页面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作参数传入