Directive

时间：2014-10-24 12:34:50 阅读：153 评论：0 收藏：0 [点我收藏+]

标签：style blog http color io os ar java sp

1. 指令（Directive）：实现语义化的标签

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
    <meta charset=utf-8>
    <title>hello directive</title>
</head>
<body>
    <hello>abc</hello>
    <script type="text/javascript" src="../angularjs-1.2.2/angular.js"></script>
    <script type="text/javascript" src="helloDirective.js"></script>
</body>
</html>

View Code

//helloDirective.js
var helloModule = angular.module("helloApp", []);
helloModule.directive("hello", function() {
    return {
        restrict: ‘E‘    ,
        template: "<div>Hi City</div>",
        replace: true
    };
});

View Code

实现效果如下：

bubuko.com,布布扣

JS代码中：restrict: ‘E‘，表示声明指令为元素。指令声明的方式有：‘E‘（元素）、‘A‘（属性）、‘C‘（样式类）、‘M‘（注释）。 template: "<div>Hi City</div>"，表示指令对应的模板内容。replace: true，表示<hello>会被模板内容替换

2. ng-transclude属性

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
    <meta charset=utf-8>
    <title>transclude</title>
</head>
<body>
    <hello>
        <br/>
        <span>子内容1</span>
        <br/>
        <span>子内容2</span>
    </hello>
    <hello></hello>
    <script type="text/javascript" src="../angularjs-1.2.2/angular.js"></script>
    <script type="text/javascript" src="transclude.js"></script>
</body>
</html>

View Code

//transclude.js
var helloModule = angular.module("helloApp", []);
helloModule.directive("hello", function() {
    return {
        restrict: ‘E‘,
        template: "<div>Hi City<div ng-transclude></div></div>",
        transclude: true
    };
});

View Code

效果如下所示：

bubuko.com,布布扣

从上述效果中，发现原来hello标签中的子内容还被保留着，放在了ng-transclude标识的模板标签span中。并且transclude.js文件中需要给hello指令添加transclude:true属性。

3. compile和link

compile阶段进行标签解析和变换，link阶段进行数据绑定操作。

Directive

标签：style blog http color io os ar java sp

原文地址：http://www.cnblogs.com/sun-mile-rain/p/4047704.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行