[angularjs] angularjs系列笔记（二）指令
[angularjs] angularjs系列笔记（二）指令
唯一Chat
发布于 2019-09-10 11:16:16
发布于 2019-09-10 11:16:16
重复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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-03-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读