1.事件监听
描述:NG框架中通过对元素标签添加【ng-事件名】指令,来对元素添加事件监听
而事件监听的回调函数需要在controller中,通过$scope来实现
说明:整个过程类似html事件
语法:
<E ng-事件名称='回调函数名(NG变量)'></E>
...
$scope.回调函数名 = function (形参){
//在函数中形参就是传入的NG变量的值
};
...
例子:
<button ng-click='func()'>点我调用controller中的函数</button>
app.controller('mainController', ['$scope', function ($scope){
$scope.mainTitle = 'lesson4_事件监听';
$scope.func = function (){
console.log('here is a func');
};
}]);
实例:
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head>
<meta charset='utf-8'/>
<title ng-bind='mainTitle'></title>
</head>
<body>
<p ng-show='showFlag'>{{msg}}</p>
<button ng-click='clickHandler()'>测试按钮</button>
<ul>
<li ng-repeat='li_info in li_infos track by $index' ng-click='li_click($index)'>{{li_info}}</li>
</ul>
<script src='angular.js'></script>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function ($scope){
$scope.mainTitle = 'lesson4_事件监听';
$scope.showFlag = true;//默认显示
$scope.msg = 'here is a test msg';
$scope.clickHandler = function (){
$scope.showFlag = !$scope.showFlag;
};
$scope.li_infos = ['金嗓子喉宝','感康胶囊','复方对乙烯氨基酚片'];
$scope.li_click = function (index){
console.log('点击的li的内容是:'+$scope.li_infos[index]);
};
}]);
</script>
</body>
</html>