我在服务中提供了一个数组供页面repeat
其中的click是我想给每个按钮加的事件
我在按钮上这样遍历
为什么会提示错误
之前在做移动端的时候也是这样做的,但没有出现这样的问题
个人建议不要写那么多的函数 直接调用同一个函数 然后使用$index作为参数传入来区分或者使用repeat的当前对象来区分 类似于楼上所说的将V作参数传入
这样写怪怪的,也许是你换了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()">
给个一般的解决方案,首先你在控制器中定义一个函数:
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}}"
里面的 {{
和 }}
去掉试试