Angular1.x的自定义指令directive参数配置详细说明
组件结构
angular-component-demo.html
<!DOCTYPE html>
<html lang="zh" ng-app="app">
<head>
<meta charset="UTF-8">
<title>自定义Angular1.x组件</title>
<script src="../angular.js"></script>
<link rel="stylesheet" href="myComponent.css">
<script src="myComponent.js"></script>
</head>
<body>
<my-component title="标题"><li>被替换内容</li></my-component>
</body>
</html>
myComponent.css
@charset "UTF-8";
/*这里设置组件的样式*/
h1 {
color: red;
}
myComponent.js
var app = angular.module('app', []);
app.directive('myComponent', function () {
return {
restrict: "ECMA",//（字符串）可选参数，指明指令在DOM里面以什么形式被声明；取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；当然也可以两个一起用，比如EA.表示即可以是元素也可以是属性。
priority: 0,//(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；
terminal: true,//（布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)
//【情况1】（字符串或者函数）可选参数，显示组件内容
// template: '<div><h1>组件内容</h1></div>',
//【情况2】一个函数，可接受两个参数tElement和tAttrs，其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上所有的属性组成的集合（对象）
/*template: function(tElement,tAttrs){
var html = '';
html += '<div>' +'hello '+tAttrs.title+'</div>';
return html;
},*/
templateUrl: 'myComponent.html',//（字符串或者函数），可选参数，可以是（1）一个代表HTML文件路径的字符串（2）一个函数，可接受两个参数tElement和tAttrs（大致同上）
//（1）默认值false。表示继承父作用域;（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;（3）{}。表示创建一个全新的隔离作用域；
scope: {
param: "@",//可以为@、&、=，其中=是双向绑定，&可以绑定方法函数名
},
transclude: true,//如果不想让指令内部的内容被模板替换，可以设置这个值为true，然后在template里面加入ng-transclude属性；如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。
controller: 'controllerName',//可以是一个字符串或者函数。若是为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数
controllerAs: 'controllerAsName',//控制器别名
//compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile所返回的函数当作链接函数，而link选项本身则会被忽略。
/*compile: function compile(tElement, tAttrs, transclude) {
console.log(tElement, tAttrs, transclude);
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
console.log(scope, iElement, iAttrs, controller);
},
post: function postLink(scope, iElement, iAttrs, controller) {
console.log(scope, iElement, iAttrs, controller);
}
}
},*/
link: function postLink(scope, iElement, iAttrs) {
console.log("link",(scope, iElement, iAttrs));
}
};
});
//注意：在本地开发时候，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓 存模板
app.run(["$templateCache", function ($templateCache) {
$templateCache.put("myComponent.html", "<div><h1>组件内容</h1></div><div ng-transclude></div>");
}]);
app.controller('controllerName', function ($scope, $element, $attrs, $transclude, $log) {
// console.log($log, $scope, $element, $attrs, $transclude);
//控制器逻辑放在这里
});
