事件监听

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容