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><!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><!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><!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><!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>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!
So fangen Sie Zeichenfolgen in der Shell ab
So legen Sie ein Passwort in Windows fest
So ermitteln Sie die Summe gerader Elemente in einem Array in PHP
array_push
Bitcoin-Explorer
Was bedeutet eine Dateierweiterung normalerweise?
So schließen Sie die App-Ressourcenbibliothek
So exportieren Sie Word mit Powerdesigner
