您的位置：首页 > Web前端 > HTML

模块化指令应用01(从html文件加载指令模板)

2016-05-12 17:18 169 查看

贴代码，不说话。。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模块化应用01</title>
<script src="angular.js"></script>
<script>
var app=angular.module("modelDemo01",[]);
app.controller("modelCtrl01",function($scope){

});

//指令的关键字，定义指令的时候，第一个参数的值，就是div配合上它的restrict属性为E,那么就表示在controller里面
//所有的标签的值为div的都会将它替换为template里的值
//第一个是指令名称(div),第二个是指令的匿名方法
app.directive("div",function(){
//对象
var direction={};

//给对象赋两个属性
//当restrict="E",标签名为指令名称（div）的内容将被template里的内容替换
//当restrict="A",标签中的属性为指令名称的标签的内容将被template里的内容替换
//当restrict="AE",则两种替换都有效

//restrict的英文意思：限制约束，在实现指令的时候，判断它是依据指令的名称，还是指令的属性
direction.restrict="AE";

//direction.template="第一个指令";//template的英文意思：模板,指令模板的内容

//angularJs在指令定义的时候，它允许从一个html文件中去加载指令模板的数据
//这样子就使得我们不一定在定义指令的时候在Js文件中去写很多的模板
//开发过程中，更利于前端文件结构组织以及扩展
direction.templateUrl="modelDemo2_template.html";

//返回对象
return direction;
});
</script>
</head>
<body ng-app="modelDemo01" ng-controller="modelCtrl01">
<!--模块化的好处：
将一些通用的组件，封装成模块，在页面中很多地方都可以重用，提高开发效率
-->
<!--第一个指令start-->
<!--标签名为div(指令名称)start-->
<div>
<b>指令</b>
</div>
<div>
<b>今天天气很好</b>
</div>
<p>今天天气很好</p>
<!--end-->

<!--属性为div(指令名称)start-->
<ul div>
<li>今天天气很好 加了div</li>
</ul>
<ul>
<li>今天天气很好 不加div</li>
</ul>
<!--end-->
<!--end-->
</body>
</html>

其中modelDemo02_template.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令的改变内容</title>
</head>
<body>
it's a nice day!
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航