大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
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。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/164222.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
![MYSQL-B+TREE索引原理[通俗易懂]](http://javaforall.cn/wp-content/themes/justnews/themer/assets/images/lazy.png)