指令link
<body ng-app="app" ng-controller="skController">
<xmg-dir content="aaa" title="sk666"></xmg-dir>
</body>
<script src="angular1.6.js"></script>
<script>
//创建模块
var app = angular.module('app', []);
//创建控制器
app.controller('skController', ['$scope', function ($scope) {
}]);
//自定义指令
app.directive('xmgDir', function () {
return {
restrict:'EA',
template:'<h1>我是指令</h1>',
/**
在指令编译之前会执行controller, 一般处理一些业务逻辑
dom还没有加载
*/
controller:function ($scope) {
console.log('controller');
},
/**
* 所有内容编译之后执行link, 所有dom元素都加载完毕了
* @param $scope 控制器当中的模型
* @param ele 指令所在的dom元素, 注意:它是一个jQlite对象 (代表:template 模版的标签)
* @param args 指令身上绑定的所有属性(代表 xmg-dir标签中的属性 content="aaa" title="sk666")
*/
link:function ($scope, ele, args) {
//console.log('link');
console.log(ele);
console.log(args);
}
}
});
</script>
网友评论