模块指令编写输入框



上节课家庭作业回顾


1.编写一个在表单中输入邮箱地址验证;


2.在上节课代码的基础上进行的修改:


prove1.png


执行结果


1)正确的时候:


prove2.png


2)错误的时候:


prove3.png


3)未输入时:


prove4.png



AngularJs模块化应用


1.一个简单的模块指令;


2.模块指令的一些注意点。


实例


<!doctype html>
<html ng-app="lesson" ng-controller="MainCtrl" >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 9
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  </style>
  </head>
  <body>
<uni>
</uni>
<ul uni="" >
<li>今天天气不错</li>
</ul>
<script src="scripts/angular-1.4.6.min.js"></script>
<script>
var app = angular.module("lesson",[]);
app.controller("MainCtrl",function($scope){
});
 
app.directive("uni",function(){
var  direction = {};
direction.restrict="AE";
//direction.template ="第一个指令";
direction.template ='<div><label>请输入用户名:</label><input type="text" /></div>';
return direction;
});
</script>
  </body>
</html>


执行结果:


prove5.png




本课小结


1.编写一个在表单中输入邮箱地址验证;


2.AngularJs模块化应用;


3.一个简单的模块指令;


4.模块指令的一些注意点。



作业


自己编写一个简单的模块指令。



【本文由大发二分彩—大发三分彩官方独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 tvqo.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部