Heim >Web-Frontend >HTML-Tutorial >Detaillierte Erläuterung der Verwendung der Scopel-Direktive von Angular
Detaillierte Erläuterung der Verwendung der Scopel-Direktive von Angular
- php中世界最好的语言Original
- 2018-03-12 16:59:041635Durchsuche
Dieses Mal werde ich Ihnen die Verwendung der Scopel-Anweisung von Angular ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung der Scopel-Anweisung von Angular? Hier ist ein praktischer Fall.
Lassen Sie uns eine benutzerdefinierte Direktive erstellen
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.primary{ background: red;
} </style></head><body ng-app="myApp">
<div ng-controller="mainCtrl">
<my-btn></my-btn>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('mainCtrl',['$scope',function($scope){
$scope.myClass = 'primary';
}]);
myApp.directive('myBtn',function(){ return {
template:'<input type="button" value="按钮" class="{{myClass}}">'
}
}); </script></body></html>
Es ist wirklich gut, eine benutzerdefinierte Direktive wie die oben beschriebene zu verwenden. Wenn Sie jedoch die von jedem Befehl gerenderten Schaltflächen anpassen möchten, scheint dies nicht möglich zu sein. Im Folgenden erstellen wir beispielsweise eine Reihe benutzerdefinierter Befehle, die genau gleich aussehen:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.primary{ background: red;
} </style></head><body ng-app="myApp">
<div ng-controller="mainCtrl">
<my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('mainCtrl',['$scope',function($scope){
$scope.myClass = 'primary';
}]);
myApp.directive('myBtn',function(){ return {
template:'<input type="button" value="按钮" class="{{myClass}}">'
}
}); </script></body></html>
Eine Idee besteht darin, diese benutzerdefinierten Befehlsschaltflächen in verschiedene Controller einzufügen und dann unterschiedliche Werte im Controller über den $scope-Kontext zu übergeben:
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.primary{ background: red;
} .success{ background: green;
} .default{ background: gray;
} </style></head><body ng-app="myApp">
<div ng-controller="aCtrl">
<my-btn></my-btn>
</div>
<div ng-controller="bCtrl">
<my-btn></my-btn>
</div>
<div ng-controller="cCtrl">
<my-btn></my-btn>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('aCtrl',['$scope',function($scope){
$scope.myClass = 'primary';
}]);
myApp.controller('bCtrl',['$scope',function($scope){
$scope.myClass = 'success';
}]);
myApp.controller('cCtrl',['$scope',function($scope){
$scope.myClass = 'default';
}]);
myApp.directive('myBtn',function(){ return {
template:'<input type="button" value="按钮" class="{{myClass}}">'
}
}); </script></body></html>
Es ist zu mühsam, so zu schreiben, daher bietet unser Angular ein Konfigurationselement namens Scope für unsere benutzerdefinierten Anweisungen, sodass wir es wie folgt schreiben können:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.primary{ background: red;
} .success{ background: green;
} .default{ background: gray;
} </style></head><body ng-app="myApp">
<div ng-controller="Controller">
<my-btn b="className1"></my-btn>
<my-btn b="className2"></my-btn>
<my-btn b="className3"></my-btn>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp
.controller('Controller', ['$scope', function($scope) {
$scope.className1 = 'primary';
$scope.className2 = 'success';
$scope.className3 = 'default';
}])
.directive('myBtn',function(){ return {
scope:{
a:'=b'
},
template:'<input type="button" value="按钮" class="{{a}}">'
}
}); </script></body></html> Um das Obige zu verstehen, achten Sie einfach auf zwei Punkte:
Das a im unabhängigen Bereich stellt hier das Modell a in der Vorlage dar.
=b Was bedeutet, dass Angular benötigt wird Um das Attribut b der aktuellen Anweisung in der Ansicht zu finden, muss der Wert des Attributs b im externen Bereich gefunden werden. Der Name des Modells lautet Das Gleiche wie der Attributname, wenn er extern verwendet wird. Er kann wie folgt geschrieben werden:
Natürlich ist das =-Zeichen oben eine bidirektionale Datenbindung:<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.primary{ background: red;
} .success{ background: green;
} .default{ background: gray;
} </style></head><body ng-app="myApp">
<div ng-controller="Controller">
<my-btn a="className1"></my-btn>
<my-btn a="className2"></my-btn>
<my-btn a="className3"></my-btn>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp
.controller('Controller', ['$scope', function($scope) {
$scope.className1 = 'primary';
$scope.className2 = 'success';
$scope.className3 = 'default';
}])
.directive('myBtn',function(){ return {
scope:{
a:'='
},
template:'<input type="button" value="按钮" class="{{a}}">'
}
}); </script></body></html>Wenn Nur wenn Sie eine unidirektionale Datenkommunikation wünschen, können Sie das @-Symbol verwenden: <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.primary{ background: red;
} .success{ background: green;
} .default{ background: gray;
} </style></head><body ng-app="myApp">
<div ng-controller="Controller">
<my-btn a="abc"></my-btn>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp
.controller('Controller', ['$scope', function($scope) {
$scope.abc = '我是初始内容';
}])
.directive('myBtn',function(){ return {
scope:{
a:'='
},
template:'<input type="text" ng-model="a"><span>{{a}}</span>'
}
}); </script></body></html> Wenn Sie ng-class verwenden möchten, können Sie es auch verwenden: <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.primary{ background: red;
} .success{ background: red;
} .default{ background: red;
} </style></head><body ng-app="myApp">
<div ng-controller="Controller">
<my-btn a="primary"></my-btn>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp
.controller('Controller', ['$scope', function($scope) {
$scope.mm = 'primary';
}])
.directive('myBtn',function(){ return {
scope:{
a:'@'
},
template:'<input type="button" value="按钮" class="{{a}}">'
}
}); </script></body></html> Schließlich gibt es noch einen Bereich, der festgelegt werden kann: Methoden zur Referenzierung externer Bereiche <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.primary{ background: red;
} .success{ background: red;
} .default{ background: red;
} </style></head><body ng-app="myApp">
<div ng-controller="Controller">
<my-btn a="primary"></my-btn>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp
.controller('Controller', ['$scope', function($scope) {
$scope.mm = true;
}])
.directive('myBtn',function(){ return {
scope:{
a:'@'
},
template:'<input type="button" value="按钮" ng-class="{primary:a}">'
}
}); </script></body></html> Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Verwandte Artikel auf der chinesischen PHP-Website! Empfohlene Lektüre: <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.primary{ background: red;
} .success{ background: red;
} .default{ background: red;
} </style></head><body ng-app="myApp">
<div ng-controller="Controller">
<my-btn fn2="fn()"></my-btn>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp
.controller('Controller', ['$scope', function($scope) {
$scope.fn = function(){
alert(11);
}
}])
.directive('myBtn',function(){ return {
scope:{
fn1:'&fn2'
},
template:'<input type="button" value="按钮" ng-click="fn1()">'
}
}); </script></body></html>Detaillierte Erläuterung der Verwendung von Angular Material
Was sind die Benennungsregeln für ID-Selektoren in CSS
Die unpopuläre Methode, Elemente horizontal und vertikal zu zentrieren
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Scopel-Direktive von Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Verwendung von Angular MaterialNächster Artikel：Ausführliche Erläuterung der Verwendung von Angular Material