本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法。分享给大家供大家参考，具体如下： 一、Html代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../../Content/Plugins/Angular/angular.min.js"></script> </head> <body ng-app="mainApp" ng-controller="mainController">...
在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或...
AngularJS ng-mouseleave 指令AngularJS 实例在鼠标指针离开元素时执行表达式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><div ng-mouseleave="count = count + 1" ng-init="count=0">鼠标从我这移开!</div><h1>{{count}}</h1><p> 该实例在鼠标从 DIV 元素移开时，计算变量 "count" 会自动加 1。</p><...
AngularJS ng-options 指令AngularJS 实例使用数组元素填充下拉列表: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectedName" ng-options="item for item in names"> </select></div><script> var app = angular.module(myApp, []); app.controll...
AngularJS ng-list 指令AngularJS 实例转换用户的输入为数组: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app=""><p>在输入框中，输入一些文本，并使用逗号分隔它们：</p><input ng-model="customers" ng-list/><p>当使用 ng-list 指令时，你的输入信息会转换为数组，如下所示：</p><pre>{{customers}}</p...
AngularJS ng-model 指令AngularJS 实例绑定输入框的值到 scope 变量中： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name"><p>input 输入框的值绑定了变量 "name" :</p> {{name}}</div><script> var app = angular.module(myApp, []); app.controll...
AngularJS ng-csp 指令AngularJS 实例修改 AngularJS 中关于 "eval" 的行为方式及内联样式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="" ng-csp><div><p>我的第一个表达式: {{ 5 + 5 }}</p></div><p>使用 ng-csp 指令, 你可以修改 AngularJS 执行代码的方式。</p><p>AngularJS 的执行方式提高了 30% 的性...
AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式，来实现数据和代码的共享和复用，但在实际的项目开发中，或许是处于懒惰，亦或是为了便利，总会想在两个控制器之间，直接进行数据的共享通信，或者是函数与方法的调用，这里我们就看看有哪些方法可以满足这个要求。 单例服务 单例服务是 AngularJS 本身支持的数据和代码共享方式，因为是单例的，所有的控制器访问的便是同一份数据。比如，下面的 Service 便可...
AngularJS ng-disabled 指令AngularJS 实例 禁用或启用输入框: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""> 点击这里禁用所有表单输入域:<input type="checkbox" ng-model="all"><br> <br><input type="text" ng-disabled="all"> <input type="radio" ng-disabled="all"> <select ng-disabled="all"><op...
AngularJS ng-app 指令AngularJS 实例 让 body 元素称为 AngularJS 应用的根元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><p>我的第一个表达式: {{ 5 + 5 }}</p></body> </html> 运行结果： 我的第一个表达式：10 定义和用法ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJ...
AngularJS ng-bind-html 指令AngularJS 实例绑定 <p> 内的 innerHTML 到变量 myText: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl"><p ng-bind-html="myText"></p...
AngularJS ng-blur 指令AngularJS 实例当输入框失去焦点(onblur)时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><input ng-blur="count = count + 1" ng-init="count=0" />{{count}}<p>实例中 "count" 变量记录了失去焦点的次数。</p></body> </html> 运行结果： 0 实例中 "count" 变量记录...
AngularJS ng-bind-template 指令AngularJS 实例<p> 元素上绑定两个表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl"></div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($s...
AngularJS ng-change 指令AngularJS 实例当输入框的值改变时执行函数: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"><p>在输入框中输入一些信息:</p><input type="text" ng-change="myFunc()" ng-model="myValue" /><p>输入框已经修改了 {{count}} 次。</p> </div><scr...
AngularJS ng-checked 指令AngularJS 实例选择一个或选择所有选项: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><p>My cars:</p><input type="checkbox" ng-model="all"> Check all<br><br><input type="checkbox" ng-checked="all">Volvo<br><input type="checkbox" ng-checked="all">Ford<br><input ty...