angularjs指令的使用

1.新建一个directiveDemo.html文件，在html页面中引入依赖的js和css类库



2.新建一个js文件，app.js用于定义模块和指令,内容如下：



myApp：模块名称
login：指令名
templateUrl：指令对应的html文件
replace：是否替换指令标签内原有的内容
restrict：使用指令的方式，A：属性的方式，E：元素的方式，M：注释的方式，C：css类的方式

3.新建一个loginForm.html文件，编写指令内容

<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">用户登录</div>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">用户名：</label>

<div class="col-md-10">
<input name="username" required type="text" class="form-control col-md-10">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">密码：</label>

<div class="col-md-10">
<input name="password" required type="password" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox" name="autoLogin">自动登录
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-primary">登录</button>
<button class="btn btn-link">重置</button>
</div>
</div>
</form>
</div>
</div>

4.在directiveDemo.html页面的html标签指定ng-app属性



5.使用指令



6.显示效果：