Das Konzept der Verwendung eines unabhängigen Bereichs in Angular-js-Tutorial-php.cn

Das Konzept der Verwendung eines unabhängigen Bereichs in Angular

php中世界最好的语言

Freigeben： 2018-03-12 17:04:49

Original

1389 Leute haben es durchsucht

Dieses Mal werde ich Ihnen das Konzept der Verwendung des winkelunabhängigen Bereichs vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung des winkelunabhängigen Bereichs? Hier sind praktische Fälle, schauen wir uns das an.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <ceshi></ceshi>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;ceshi&#39;,function(){            var option = {
                template:&#39;<p>{{abc}}</p>&#39;
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>

Nach dem Login kopieren

Wenn wir einen Befehl selbst erstellen, kann dieser Befehl nicht nur einmal verwendet werden. Er muss wiederholt verwendet werden. Einige davon müssen innerhalb einer Seite oder eines Controllers verwendet werden mehrfach.
Ähnlich wie im obigen Szenario führt eine Änderung der Daten in einem beliebigen Eingabefeld dazu, dass sich gleichzeitig auch die Daten in anderen Tags ändern. Dies ist offensichtlich nicht das, was wir wollen.

Um in einen unabhängigen Bereich zu konvertieren, benötigen Sie nur eine Codezeile:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <ceshi></ceshi>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;ceshi&#39;,function(){            var option = {
                template:&#39;<p>{{abc}}</p>&#39;,
                scope:{}
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>

Nach dem Login kopieren

Einseitige Datenbindung:

@-Operator , der Inhalt in doppelten Anführungszeichen wird als Zeichenfolge für die Bindung behandelt.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <my-directive name="aaaa"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {
                template:&#39;<p>wew{{name}}<p/>&#39;,
                scope:{
                    name:&#39;@&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
        });    </script></body></html>

Nach dem Login kopieren

Einwegbindung, erhält den Wert aus dem Attribut des aktuellen Befehls. und weist es dann dem aktuellen This-Attribut im unabhängigen Bereich zu

Das Konzept der Verwendung eines unabhängigen Bereichs in Angular

Zwei-Wege-Datenbindung

= Operator bindet eine Variable

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <input type="text" ng-model="abc">
    <my-directive name="abc"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {
                template:&#39;<p>wew{{name}}<input ng-model="name"><p/>&#39;,
                scope:{
                    name:&#39;=&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>

Nach dem Login kopieren

Name = „abc“ ist der Kern. Die linke Seite ist mit dem unabhängigen Bereich verbunden, und die rechte Seite ist mit dem Modell im externen Bereich abc verbunden

Das Konzept der Verwendung eines unabhängigen Bereichs in Angular

Verwenden Sie das Verhalten des übergeordneten Bereichs< Der an den 🎜>

&-Operator gebundene Inhalt ist eine Methode

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <my-directive fn1="fn2(name)"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {                restrict:&#39;E&#39;,                template:&#39;<button ng-click="fn1({name:\&#39;username\&#39;})">wfewef</button>&#39;,                scope:{                    fn1:&#39;&&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.fn2 = function(attr){                console.log(attr);
            }
        });    </script></body></html>

Nach dem Login kopieren

Das Konzept der Verwendung eines unabhängigen Bereichs in Angular

Wie zu verstehen:

Unabhängig davon Um zu erfahren, wie die Anweisung intern implementiert wird, schauen wir uns zunächst an, wie sie verwendet wird, und schauen uns dann an, wie die Variablen oder Methoden im entsprechenden übergeordneten Bereich definiert sind.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Scopel-Direktive von Angular

Detaillierte Erläuterung der Verwendung von Angular Material

Detaillierte Erläuterung der Verwendung von $apply() in AngularJS

Das obige ist der detaillierte Inhalt vonDas Konzept der Verwendung eines unabhängigen Bereichs in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!