Angularjs[22] - 内置事件指令

  • ng-change
  • ng-click
  • ng-dbclick
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • mg-mouseover
  • ng-mouseup
  • ng-submit
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app="myApp">
       <div ng-controller="firstController">

           <button ng-click="changeStatus($event)">切换状态</button>
           {{status}}
       </div>
    </div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>
var myApp = angular.module(‘myApp‘,[])
.controller(‘firstController‘,function ($scope) {
    $scope.status = ‘false‘;
    // $scope.changeStatus = function () {
    //     $scope.status = !$scope.status;
    // }
    $scope.changeStatus = function (event) {
        //通过 element 转换成 jquery 对象
        angular.element(event.target).html(‘转换状态为:‘ + $scope.status);
        $scope.status = !$scope.status;
    }
});

时间: 2024-10-10 12:38:18

Angularjs[22] - 内置事件指令的相关文章

Angularjs[22] - 内置渲染指令

指令:利用指令来扩展HTML标签,增加声明式语法来实现想做的任何事,可以应用有特殊意义的元素和属性来替换一般的HTML标签. 渲染指令: ng-init:初始化应用时创建一个变量: ng-bind: 使用给定的变量或表达式的值来替换 HTML 元素的内容: ng-repeat: $index:当前索引: $first:是否为第一个元素: $middle:是否为非头非尾元素: $last:是否为尾元素: ng-include: 包含外部 HTML 文件. <!DOCTYPE html> <

Spring 事件(1)- 内置事件

Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Control – IOC) 理解依赖注入(DI – Dependency Injection) Bean XML 配置(1)- 通过XML配置加载Bean Bean XML 配置(2)- Bean作用域与生命周期回调方法配置 Bean XML 配置(3)- 依赖注入配置 Bean XML 配置(

Spring内置事件以及自定义事件

1. Spring内置的事件有哪些? Spring中的事件是一个 ApplicationEvent类的子类,由实现 ApplicationEventPublisherAware 接口的类发送,实现 ApplicationListener 接口的类监听. Spring中已经定义了一组内置事件,这些事件由ApplicationContext容器发出.(ContextRefreshedEvent.ContextStartedEvent.ContextStoppedEvent.ContextClosed

AngularJS复习-----内置过滤器和内置服务

AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请求 $resource  创建一个可以restful服务器端数据源交互对象 $location  用于返回当前页面的URL地址 $window  浏览器的window元素的jquery包装 $document  浏览器的document元素的jQuery包装 $rootscope  跟作用域的访问

angularJS使用内置服务

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp" ng-contr

内置指令和内置事件

<div ng-include="'other.html'"></div> <div ng-include src="'other.html'"></div> <button ng-click='changeStaus($event)'>点击</button> $scope.changeStaus=function(event){ angular.element(event.target).ht

依赖内置ng-model指令的自定义指令

ng-model是AngularJS的原生指令,通过require: 'ngModel'可以更加深入地处理数据的双向数据绑定. ng-model里面的属性有: $parsers:保存了从viewValue到modelValue绑定过程中的处理函数. $formatters:保存了从modelValue到viewValue绑定过程中的处理函数. $setViewValue:当AngularJS外部发生某件事情的时候,需要调用这个函数才能让AngularJS知道应该更新modelValue了. $r

Angularjs[24] - 内置节点属性

ng-style <!--<div ng-style="{color:'red','margin-top':'50px'}">--> <!--ng-style--> <!--</div>--> <div ng-style="defaultStyle" ng-show="status"> ng-style </div> $scope.defaultStyle = {

夺命雷公狗—angularjs—15—内置封装好的计时器$interval和$timeout

这里其实和js源生的效果是一样的,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> </head> <body ng-