Cet article vous donnera une introduction détaillée à la directive Angular et comprendre son utilisation. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
La directive peut être une chose plus compliquée dans AngularJS. Généralement, nous le comprenons comme une instruction. AngularJS est livré avec de nombreuses instructions prédéfinies, telles que ng-app, ng-controller, etc. Vous pouvez trouver une caractéristique. Les instructions fournies avec AngularJS commencent toutes par ng-.
Alors, qu’est-ce que Directive exactement ? Ma compréhension personnelle est la suivante : encapsulez un morceau de HTML et de JS ensemble pour former une entité indépendante réutilisable avec des fonctions spécifiques. Expliquons en détail l'utilisation générale de Directive.
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
}Tutoriels associés recommandés : "Tutoriel angulaire"
Comme indiqué ci-dessus, il existe de nombreux attributs, ce une ligne d'attributs est utilisée pour définir des 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!
更多编程相关知识，请访问：编程入门！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Dans quel langage le vscode peut-il être écrit ?
vue de clé sans fil
emplacement.hash
Comment résoudre l'indisponibilité
La différence entre un téléphone de remplacement officiel et un téléphone neuf
Quelle est la différence entre les formats guid et mbr
Utilisation de distinct en SQL
Comment résoudre le problème que localhost ne peut pas être ouvert
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
