您现在的位置是:首页 > Javascript
当前栏目
7.在AngularJS视图中实现指令
2023-02-18 16:29:39 时间
指令扩展了HTML的行为。可以创建自定义的HTML元素,属性和特定于应用程序的类与功能。
1.了解指令
指令是AngularJS模板标记和用于支持的JavaScript代码的组合。AngularJS指令标记可以是HTML属性,元素名称,或CSS类。
AngularJS编译器遍历DOM的模板并编译所有的指令。通过指令与作用域结合,产生新的实时视图来链接指令。
2.使用内置指令
- 支持AngularJS功能的指令
- 扩展表单元素的指令
- 把作用域绑定到页面元素的指令
2.1.支持AngularJS功能的指令
ngApp,ngCloak,...
2.2.扩展表单元素的指令
AngularJS很大程度上与表单元素整合。以对应用程序的表单元素提供数据绑定和事件绑定。
<a href="" ng-click="handleClick()">Click Me</a> <ng-form name="myForm"> <input type="text" ng-model="myName" required> </ng-form>
实现一个用于表单指令的控制器
var myModel=angular.module('myApp', []); myModel.controller('myController',function($scope){ $scope.cameras=[ {make:'Canon',model:'70D',mp:20.2}, {make:'Canon',model:'70D',mp:20}, {make:'Nikon',model:'D7100',mp:24.1}, {make:'Nikon',model:'D5200',mp:24.1} ]; $scope.cameraObj=$scope.cameras[0]; $scope.cameraName='Camon'; $scope.cbValue=''; $scope.someText=''; });
相关文章
- JavaScript性能优化 DOM编程
- JavaScript定时器分析
- 《你不知道的JavaScript》整理(六)——强制类型转换
- 《你不知道的JavaScript》整理(五)——值与原生函数
- JavaScript实现按键精灵
- JavaScript中几个相似方法对比
- 日月如梭,玩转JavaScript日期
- JavaScript字符集编码与解码
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
- 前端网络、JavaScript优化以及开发小技巧
- 《JavaScript设计模式 张》整理
- JavaScript特性(attribute)、属性(property)和样式(style)
- 《JavaScript设计模式与开发实践》整理
- 《你不知道的JavaScript》整理(四)——原型
- 《你不知道的JavaScript》整理(三)——对象
- 《你不知道的JavaScript》整理(二)——this
- 《你不知道的JavaScript》整理(一)——作用域、提升与闭包
- 制作动画或小游戏——CreateJS事件(二)
- 制作动画或小游戏——CreateJS基础类(一)
- 讲解开源项目:让你成为灵魂画手的 JS 引擎:Zdog