This article will give you a detailed introduction to Angular Directive and understand its usage. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Directive may be a more complicated thing in AngularJS. Generally we understand it as an instruction. AngularJS comes with many preset instructions, such as ng-app, ng-controller, etc. You can find a characteristic. The instructions that come with AngularJS all start with ng-.
So, what exactly is Directive? My personal understanding is this: encapsulate a piece of HTML and JS together to form a reusable independent entity with specific functions. Let's explain the general usage of Directive in detail.
var myDirective = angular.module('directives', []);
myDirective.directive('directiveName', function($inject) {
return {
template: &#39;<div></div>&#39;,
replace: false,
transclude: true,
restrict: &#39;E&#39;,
scope: {},
controller: function($scope, $element) {
},
complie: function(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
},
post: function postLink(scope, iElement, iAttrs, controller) {
}
};
},
link: function(scope, iElement, iAttrs) {
}
};
});return {
name: &#39;&#39;,
priority: 0,
terminal: true,
scope: {},
controller: fn,
require: fn,
restrict: &#39;&#39;,
template: &#39;&#39;,
templateUrl: &#39;&#39;,
replace: &#39;&#39;,
transclude: true,
compile: fn,
link: fn
}Related tutorial recommendations: "angular tutorial"
As shown above, there will be Many attributes, this line of attributes are used to define directives.
name
priority
teminal
scope
true{}controller
require
restrict
template
templateUrl
replace
transclude
true/false 转换这个directive的内容。（这个感觉上，是直接将内容编译后搬入指定地方）‘element’ 转换整个元素，包括其他优先级较低的directive。（像将整体内容编译后，当作一个整体（外面再包裹p），插入到指定地方）compile
link
这里关于directive的scope为一个object时，有更多的内容非常有必要说明一下。看下面的代码：
scope: {
name: &#39;=&#39;,
age: &#39;=&#39;,
sex: &#39;@&#39;,
say: &#39;&&#39;
}这个scope中关于各种属性的配置出现了一些奇怪的前缀符号，有=，@，&，那么这些符号具体的含义是什么呢？再看下面的代码：
<div my-directive name="myName" age="myAge" sex="male" say="say()"></div>复制代码
function Controller($scope) {
$scope.name = &#39;Pajjket&#39;;
$scope.age = 99;
$scope.sex = &#39;我是男的&#39;;
$scope.say = function() {
alert(&#39;Hello，我是弹出消息&#39;);
};
}=: 指令中的属性取值为Controller中对应$scope上属性的取值@: 指令中的取值为html中的字面量/直接量&： 指令中的取值为Controller中对应$scope上的属性，但是这个属性必须为一个函数回调
下面是更加官方的解释：=或者=expression/attr例如： 中，widget定义的scope为：{localModel: '=myAttr'}，那么widget scope property中的localName将会映射父scope的parentModel。如果parentModel发生任何改变，localModel也会发生改变，反之亦然。即双向绑定。
@或者@attr 建立一个local scope property到DOM属性的绑定。因为属性值总是String类型，所以这个值总返回一个字符串。如果没有通过@attr指定属性名称，那么本地名称将与DOM属性的名称一致。 例如： ，widget的scope定义为：{localName: '@myAttr'}。那么，widget scope property的localName会映射出"hello "转换后的真实值。当name属性值发生改变后，widget scope的localName属性也会相应的改变（仅仅是单向，与上面的=不同）。那么属性是在父scope读取的（不是从组件的scope读取的）
&或者&attr 提供一个在父scope上下文中执行一个表达式的途径。如果没有指定attr的名称，那么local name将与属性名一致。
<widget my-attr="count = count + value">，widget的scope定义为：{localFn:’increment()’}，那么isolate scope property localFn会指向一个包裹着increment()表达式的function。
一般来说，我们希望通过一个表达式，将数据从isolate scope传到parent scope中。这可以通过传送一个本地变量键值的映射到表达式的wrapper函数中来完成。例如，如果表达式是increment(amount)，那么我们可以通过localFn({amount:22})的方式调用localFn以指定amount的值。
下面的示例都围绕着上面所作的参数说明而展开的。
// 自定义directive
var myDirective = angular.modeule(&#39;directives&#39;, []);
myDirective.directive(&#39;myTest&#39;, function() {
return {
restrict: &#39;EMAC&#39;,
require: &#39;^ngModel&#39;,
scope: {
ngModel: &#39;=&#39;
},
template: &#39;<div><h4>Weather for {{ngModel}}</h4</div>&#39;
};
})；
// 定义controller
var myControllers = angular.module(&#39;controllers&#39;, []);
myControllers.controller(&#39;testController&#39;, [
&#39;$scope&#39;,
function($scope) {
$scope.name = &#39;this is directive1&#39;;
}
]);
var app = angular.module(&#39;testApp&#39;, [
&#39;directives&#39;,
&#39;controllers&#39;
]);
<body ng-app="testApp">
<div ng-controller="testController">
<input type="text" ng-model="city" placeholder="Enter a city" />
<my-test ng-model="city" ></my-test>
<span my-test="exp" ng-model="city"></span>
<span ng-model="city"></span>
</div>
</body>templateUrl其实根template功能是一样的，只不过templateUrl加载一个html文件，上例中，我们也能发现问题，template后面根的是html的标签，如果标签很多呢，那就比较不爽了。可以将上例中的，template改一下。
myDirective.directive(&#39;myTest&#39;, function() {
return {
restrict: &#39;EMAC&#39;,
require: &#39;^ngModel&#39;,
scope: {
ngModel: &#39;=&#39;
},
templateUrl:&#39;../partials/tem1.html&#39; //tem1.html中的内容就是上例中template的内容。
}
});//directives.js中定义myAttr
myDirectives.directive(&#39;myAttr&#39;, function() {
return {
restrict: &#39;E&#39;,
scope: {
customerInfo: &#39;=info&#39;
},
template: &#39;Name: {{customerInfo.name}} Address: {{customerInfo.address}}<br>&#39; +
&#39;Name: {{vojta.name}} Address: {{vojta.address}}&#39;
};
});
//controller.js中定义attrtest
myControllers.controller(&#39;attrtest&#39;,[&#39;$scope&#39;,
function($scope) {
$scope.naomi = {
name: &#39;Naomi&#39;,
address: &#39;1600 Amphitheatre&#39;
};
$scope.vojta = {
name: &#39;Vojta&#39;,
address: &#39;3456 Somewhere Else&#39;
};
}
]);
// html中
<body ng-app="testApp">
<div ng-controller="attrtest">
<my-attr info="naomi"></my-attr>
</div>
</body>Name: Naomi Address: 1600 Amphitheatre //有值,因为customerInfo定义过的 Name: Address: //没值 ，因为scope重定义后，vojta是没有定义的
myDirectives.directive(&#39;myAttr&#39;, function() {
return {
restrict: &#39;E&#39;,
template: &#39;Name: {{customerInfo.name}} Address: {{customerInfo.address}}<br>&#39; +
&#39;Name: {{vojta.name}} Address: {{vojta.address}}&#39;
};
});Name: Address: Name: Vojta Address: 3456 Somewhere Else
因为此时的directive没有定义独立的scope，customerInfo是undefined，所以结果正好与上面相反。
myDirective.directive(&#39;myEvent&#39;, function() {
return {
restrict: &#39;E&#39;,
transclude: true,
scope: {
&#39;close&#39;: &#39;$onClick&#39; //根html中的on-click="hideDialog()"有关联关系
},
templateUrl: &#39;../partials/event_part.html&#39;
};
});
myController.controller(&#39;eventTest&#39;, [
&#39;$scope&#39;,
&#39;$timeout&#39;,
function($scope, $timeout) {
$scope.name = &#39;Tobias&#39;;
$scope.hideDialog = function() {
$scope.dialogIsHidden = true;
$timeout(function() {
$scope.dialogIsHidden = false;
}, 2000);
};
}
]);<body ng-app="phonecatApp">
<div ng-controller="eventtest">
<my-event ng-hide="dialogIsHidden" on-click="hideDialog()">
Check out the contents, {{name}}!
</my-event>
</div>
</body>
<!--event_part.html -->
<div>
<a href ng-click="close()">×</a>
<div ng-transclude></div>
</div><body ng-app="phonecatApp">
<div ng-controller="eventtest">
<div ng-hide="dialogIsHidden" on-click="hideDialog()">
<span>Check out the contents, {{name}}!</span>
</div>
</div>
</body>controller，link，compile之间的关系myDirective.directive(&#39;exampleDirective&#39;, function() {
return {
restrict: &#39;E&#39;,
template: &#39;<p>Hello {{number}}!</p>&#39;,
controller: function($scope, $element){
$scope.number = $scope.number + "22222 ";
},
link: function(scope, el, attr) {
scope.number = scope.number + "33333 ";
},
compile: function(element, attributes) {
return {
pre: function preLink(scope, element, attributes) {
scope.number = scope.number + "44444 ";
},
post: function postLink(scope, element, attributes) {
scope.number = scope.number + "55555 ";
}
};
}
}
});
//controller.js添加
myController.controller(&#39;directive2&#39;,[
&#39;$scope&#39;,
function($scope) {
$scope.number = &#39;1111 &#39;;
}
]);
//html
<body ng-app="testApp">
<div ng-controller="directive2">
<example-directive></example-directive>
</div>
</body>Hello 1111 22222 44444 5555 !
由结果可以看出来，controller先运行，compile后运行，link不运行。 我们现在将compile属性注释掉后，得到的运行结果如下：
Hello 1111 22222 33333!
更多编程相关知识，请访问：编程入门！！
The above is the detailed content of An in-depth analysis of the usage of Directive in Angular. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
