order
This paper describes the instruction related knowledge points of angularjs, which is an "outdated" framework. It is only for learning reference. Please understand if there is any mistake.
Instruction call mode
| Letter | style | Example |
|---|---|---|
| E | element | <app-hello></app-hello> |
| A | attribute | <div app-hello></div> |
| C | class | <h3 class="app-hello"></h3> |
| M | Notes | <!-- directive: app-hello --> |
Because the way of class and annotation is easy to be misunderstood, it is usually called in two ways of "EA".
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>angularjs Custom instruction directive</title>
<meta name="author" content="loushengyue">
</head>
<body ng-app="app">
<app-hello></app-hello>
<div app-hello></div>
<h3 class="app-hello"></h3>
<!-- directive: app-hello -->
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'EACM', //E for label, A for attribute, C for class, M for comment
replace: true,
template: '<h1>hello world.</h1>' //Note that there can only be one root node
}
})
</script>
</body>
</html>Instruction transfer mode
| Symbol | type | case | Other writing methods (Note: name at call = = property name) |
|---|---|---|---|
| @ | Pass string | title: '@attrTitle' | attrTitle: '@' |
| = | Transfer variables | name: '=attrName' | attrName: '=' |
| & | transfer function | greet: '&attrGreet' | attrGreet: '&' |
<body ng-app="app" ng-controller="ctrl">
<app-hello attr-title="hello"
attr-name="name"
attr-greet="greet()"></app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.name = 'loushengyue';
$scope.greet = function () {
alert('hello ' + this.name);
}
}])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
scope: {
title: '@attrTitle', //Pass string
name: '=attrName', //Transfer variables
greet: '&attrGreet' //transfer function
},
template: '<div>' +
'<h1>{{title}} <small>{{name}}</small></h1>' +
'<button ng-click="greet()">greet</button></div>'
}
})
</script>
</body>Include slot
<body ng-app="app">
<app-hello>See where I finally went!!!</app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
transclude: true,
template: '<div><h1 ng-transclude>In fact</h1><br><button>Great</button></div>'
//Note that ng include can only be placed on a double label label, and its contents can be replaced
}
})
</script>
</body>Nesting instructions by trasculde
<body ng-app="app">
<app-hello>
<app-son></app-son>
</app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
transclude: true,
template: '<div><h1 ng-transclude>Subinstruction slot location</h1><br><button>Great</button></div>'
//Note that ng include can only be placed on a double label label, and its contents can be replaced
}
})
.directive('appSon', function () {
return {
restrict: 'AE',
replace: true,
template: '<span>I love you.</span>'
}
})
</script>
</body>Function return parameter rule in instruction
Note that "{}" needs to be added for the rule that the variables in the instruction are passed to the parent scope as parameters, and it also needs to be consistent with the function parameter name of the caller.
<body ng-app="app" ng-controller="ctrl">
<!--Be careful: greet(name)Medium name It's from the instructions name Matching, can not be named at will-->
<app-hello attr-greet="greet(name)"></app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.greet = function (user) {
alert(user);
}
}])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
scope: {
greet: '&attrGreet'
},
template: '<div>' +
'<input type="text" ng-model="username">' +
'<button ng-click="greet({name: username})">greet</button></div>',
//Note: "{}" needs to be added to the method when parameters are returned, and the key name is the same as the parameter at the call
link: function (scope, element, attrs) {
scope.username = 'hello loushengyue';
}
}
})
</script>
</body>link function
<body ng-app="app">
<app-hello name="Lou Sheng Yue"></app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
template: '<div>' +
'<h1>{{title}}</h1>' +
'<button ng-click="greet()" id="btn">greet</button></div>',
link: function (scope, element, attrs) {
scope.title = 'hello loushengyue'; //Local variables can be declared (similar to controllers)
scope.greet = function () { //Local functions can be declared (similar to controllers)
alert(this.title);
};
element[0].style.backgroundColor = 'red'; //Command element background color changes to red
console.log(attrs.name) //Property name -- > passed in when calling instruction
}
}
})
</script>
</body>controller function
<body ng-app="app">
<app-hello name="Lou Sheng Yue"></app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
template: '<div>' +
'<h1>{{title}}</h1>' +
'<button ng-click="greet()" id="btn">greet</button></div>',
controller: function ($scope, $element, $attrs, $transclude) {
$scope.title = 'hello loushengyue'; //Local variables can be declared
$scope.greet = function () { //Local functions can be declared
alert(this.title);
};
$element[0].style.backgroundColor = 'red'; //Command element background color changes to red
console.log($attrs.name) //Property name -- > passed in when calling instruction
}
}
})
</script>
</body>The most important thing is to find out the difference among compile, controller and link functions, Click the reference link