Rumah > Artikel > hujung hadapan web > 深入浅析Angular中Directive的用法
本篇文章给大家详细介绍一下Angular Directive,了解它的用法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
Directive可能是AngularJS中比较复杂的一个东西了。一般我们将其理解成指令。AngularJS自带了不少预设的指令,比如ng-app,ng-controller这些。可以发现个特点,AngularJS自带的指令都是由ng-打头的。
那么,Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html、js封装在一起,形成一个可复用的独立个体,具体特定的功能。下面我们来详细解读一下Directive的一般性用法。
var myDirective = angular.module(&#39;directives&#39;, []); myDirective.directive(&#39;directiveName&#39;, 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 }
相关教程推荐:《angular教程》
如上所示,return的对象中会有很多的属性,这行属性都是用来定义directive的。
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将与属性名一致。
68c72eacde80dbb19dac8db1a79aac0a
,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
!
更多编程相关知识,请访问:编程入门!!
Atas ialah kandungan terperinci 深入浅析Angular中Directive的用法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!