AngularJS指令「建议收藏」
大家好，又见面了，我是你们的朋友全栈君。
AngularJS指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。
小栗子：
<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> <p>你输入的为： {
{ firstName }}</p> </div>上面例子的分析： ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
使用 *ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。
1.关于数据的绑定：
上面实例中的{ { firstName }}表达式是一个AngularJS数据绑定表达式。 { { firstName }}同步了 AngularJS 表达式与 AngularJS 数据。 { { firstName }} 是通过 ng-model=”firstName” 进行同步。
2.重复HTML元素
ng-repeat指令会重复一个HTML元素：
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {
{ x }} </li> </ul> </div>ng-repeat指令用在一个对象数组上：
<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循环对象：</p> <ul> <li ng-repeat="x in names"> {
{ x.name + ', ' + x.country }} </li> </ul> </div>3.创建自定义的指令
使用 .directive 函数来添加自定义的指令，要调用自定义指令，HTML元素上需添加自定义指令名。 使用驼峰发来命名一个指令，myDirective，但是在使用它时需要以 – 分割，my-directive
<body ng-app="myApp">
<my-directive></my-directive>
<script> var app = angular.module("myApp", []); app.directive("myDirective",function(){
return { template : "<h1>自定义指令</h1>" }; }); </script>
</body>你可以通过以下方式调用指令： 1.元素名
<my-directive></my-directive>2.属性
<div my-directive></div>3.类名
<div class="my-directive"></div>4.注释
<!-- directive: my-directive -->*.限制调用
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});restrict值可以是以下几种：
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用默认是EA。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/164222.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
