angular directive ng-click not work

发表于   |  

###隔离事件
中午在项目里遇到angular directive 里加入click事件，不能正常工作，查询API后，基本可以通过angularjs 的隔离scope 完成，具体实现如下：

html

1
<mobi edit-click="selectMobiFlag(1)" item="item"></mobi>

html 端定义了mobi的指令， 具体点击事件方法如selectMobileFlat,

指令（Directive）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.directive('mobi', function() {
	return {
		restrict: 'EA',
		scope: {
			'item':'=',
			'editClick': '&'
		},
		template: '<div ng-click="toggleState(item)" >111</div>',
		link: function($scope, element, attrs) {
			$scope.toggleState = function(item){
				console.log(item);
				$scope.editClick(item);
			};
		}
	};
})

指令里绑定了item,传入的是点击 HTML片段本身，在directive里渲染了template 模板，主要负责点击的声明，在隔离作用域里，应用editClick:"&" 和 $scope.toggleState 实现关联。

###最后
实现selectMobiFlag的具体实现:

1
2
3
4
$scope.selectMobiFlag = function(item) {
	
	$scope.mobiFlag = item;
}