3
588angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Tobias';
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function (scope, element) {
scope.name = 'Jeff';
}
};
});
这个在官网上的directive代码，link函数起到的什么作用，解释有点费解，然后其中有三个参数
scope：is an Angular scope object.
element： is the jqLite-wrapped element that this directive matches.
attrs： is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
这个用法是怎样的，scope好像就是return中得scope属性。。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
首先我们先来聊聊你列出的
directive中的几个属性：restrictE： 表示该
directive仅能以element方式使用，即：<my-dialog></my-dialog>A： 表示该
directive仅能以attribute方式使用，即：<p my-dialog></p>EA: 表示该
directive既能以element方式使用，也能以attribute方式使用transclude你的
directive可能接受页面上的其他html内容时才会用到，建议你先去掉该参数。有些高阶了。scope当你写上该属性时，就表示这个
directive不会从它的controller里继承$scope对象，而是会重新创建一个。templateUrl你的
directive里的html内容link可以简单理解为，当
directive被angular 编译后，执行该方法这里你说的没错，
link中的第一个参数scope基本上就是你说的上面写的那个scope。element简单说就是$('my-dialog')attrs是个map，内容是你这个directive上的所有属性，例如：你在页面上如果这样写了directive:那
attrs就是：{
type: 'modal',
animation: 'fade'
}
link 的概念可以与 compile 结合起来理解；二者都用于把directive渲染出来。
compile在编译前执行，负责把template（包括transclude所引用的）变成一个完整的DOM结构。
link在编译后执行，负责根据controller和scope里的东东，给compile得到的DOM注册事件、关联数据，或者repeat之。
粗暴理解的话，可以认为一个管DOM准备，一个管数据操作。
参考：http://stackoverflow.com/questions/12164138/what-is-the-difference-between-compile-and-link-function-in-angularjs
我是初学angularJS,在我看来link函数主要用来操作DOM的