[angularjs] angularjs系列笔记(二)指令
2016-03-20 00:56
543 查看
重复HTML元素
ng-repeat指令可以重复HTML元素
创建自定义指令
使用.directive()函数来自定义指令,要调用自定义指令,html元素上需要添加自定义指令名,使用驼峰法来命名一个指令
限制使用,默认是元素名调用和属性调用
ng-repeat指令可以重复HTML元素
<body> <div ng-app="Home" ng-controller="index"> <p ng-repeat="x in names">{{x.name}}</p> </div> </body> <script type="text/javascript"> //实例化应用对象,参数:模块名,空数组 var app=angular.module("Home",[]); //调用应用对象的controller()方法,参数:控制器名,回调函数 app.controller("index",function($scope){ $scope.names=[{name:'tsh'},{name:'tsh1'}]; }) </script>
创建自定义指令
使用.directive()函数来自定义指令,要调用自定义指令,html元素上需要添加自定义指令名,使用驼峰法来命名一个指令
限制使用,默认是元素名调用和属性调用
<body> <div ng-app="Home"> 元素名调用 <tsh></tsh> 属性调用 <div tsh></div> 类名调用 <div class="tsh"></div> </div> </body> <script type="text/javascript"> //实例化应用对象,参数:模块名,空数组 var app=angular.module("Home",[]); //调用应用对象的directive()方法,参数:指令名,回调函数,返回一个对象 app.directive("tsh",function(){ return { template:"<p>我是自定义指令</p>" } }); </script>
相关文章推荐
- 浅析AngularJS中的指令
- AngularJS 中的指令实践开发指南(一)
- AngularJS中的指令实践开发指南(二)
- AngularJS中的指令
- AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示
- AngularJS 单路由多视图(Multiple Named Views)
- AngularJS 过滤器
- AngularJS 控制器
- AngularJS Scope(作用域)
- 浅谈AngularJS的$parse服务
- [Angular 2] Using events and refs
- 在 Angularjs 中 ui-sref 和 $state.go 如何传递参数
- angularJs 问题
- angularjs表达式中的HTML内容,如何不转义,直接表现为html元素
- AngularJS 指令
- AngularJS简介
- [Angular 2] WebStorm - Managing Imports
- 【angularJS】过滤器
- AngularJS表达式
- Angular学习笔记