AngularJS报错 Cannot use 'in' operator to search for 'functionName' in 1
2016-01-12 11:44
597 查看
在使用AngularJS的指令时,如果 element上有方法绑定,并且在调用该方法时候可以会抛出异常 Cannot use 'in' operator to search for 'functionName' in 1
下面举一个具体实例,定义一个控制器 ,该控制器中有一个方法 editWebsite
再定义一个指令,该指令的 editWebsite会绑定指令上的函数
下面我们使用这个指令,该指令的 edit-website绑定饿了controller中的 editWebsite(id)
如果这么使用,再点击td时,控制台就会报错
TypeError: Cannot use 'in' operator to search for 'editWebsite' in 1
原因及解决方法: 原因是使用&绑定的函数,其中的参数要使用json的格式来传递,即向下面这样传递
下面举一个具体实例,定义一个控制器 ,该控制器中有一个方法 editWebsite
app.controller('OverviewCtrl', ['$scope', '$location', '$routeParams', 'websiteService', 'helperService', function($scope, $location, $routeParams, websiteService, helperService) { ... $scope.editWebsite = function(id) { $location.path('/websites/edit/' + id); }; }]);
再定义一个指令,该指令的 editWebsite会绑定指令上的函数
app.directive('wdaWebsitesOverview', function() { return { restrict: 'E', scope: { heading: '=', websites: '=', editWebsite: '&' }, templateUrl: 'views/websites-overview.html' } });
下面我们使用这个指令,该指令的 edit-website绑定饿了controller中的 editWebsite(id)
<wda-websites-overview heading="'All websites'" websites="websites" edit-website="editWebsite(id)"></wda-websites-overview>接下来看看 指令是如何使用这个函数的,如下,当点击td时,会调用 edtiWebsite()函数,并且将website.id作为参数传入
<td data-ng-click="editWebsite(website.id)">EDIT</td>
如果这么使用,再点击td时,控制台就会报错
TypeError: Cannot use 'in' operator to search for 'editWebsite' in 1
原因及解决方法: 原因是使用&绑定的函数,其中的参数要使用json的格式来传递,即向下面这样传递
data-ng-click="editWebsite({id: website.id})"或者使用onClick封装一层
data-ng-click="onClick(website.id)"并且在link中定义
$scope.onClick = function(id) { // Ad "id" to the locals of "editWebsite" $scope.editWebsite({id: id}); }
相关文章推荐
- AngularJS Injector和Service的工作机制
- AngularJS 开发者最常犯的 10 个错误
- AngularJS报错 $digest already in progress
- AngularJS Source code
- AngularJs动态加载模块和依赖注入详解
- AngularJs动态加载模块和依赖注入详解
- AngularJS ng-class用法
- AngularJs 动态加载模块和依赖
- angularJS任务列表例子
- karma+angular
- AngularJS进阶(二十六)实现分页操作
- AngularJS进阶(二十六)实现分页操作
- Angularjs 数据过滤
- [AngularJS] Using AngularJS's ngClass
- Angularjs实例3
- Angularjs 数据循环
- Angularjs模块
- 理解Angular数据双向绑定
- 理解Angular数据双向绑定
- angularjs 实现 window.onload() $(document).ready()