コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Angular での独立したスコープの使用の概念

Angular での独立したスコープの使用の概念

php中世界最好的语言
リリース： 2018-03-12 17:04:49
オリジナル
1388 人が閲覧しました

今回は、角度独立スコープを使用するための概念について説明します。 角度独立スコープを使用する際の注意点は何ですか? 以下は実際のケースです。 

<!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>
ログイン後にコピー
コマンドを自分で作成する場合、それを 1 回だけ使用することはできません。一部のコマンドは、ページ内または

コントローラー

内で複数回使用する必要があります。 上記のシナリオと同様に、入力ボックスのデータを変更すると、同時に他のタグのデータも変更されます。現時点では、これは明らかに望ましくないことです。
独立したスコープに変換するには、コードを 1 行だけ必要とします: 

<!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>
ログイン後にコピー

一方向

データ バインディング

: @

operator

、二重引用符で囲まれたコンテンツはバインディングの 文字列 として扱われます 

<!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>
ログイン後にコピー
単一方向バインディング、現在の命令の属性から値を取得し、それを現在の独立スコープ内の属性に割り当てます

Angular での独立したスコープの使用の概念双方向データ バインディング

=演算子は変数にバインドされます

<!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>
ログイン後にコピー

name=" abc" がコアです。 左側の接続は独立したスコープであり、右側の接続は外部スコープのモデル abc です

Angular での独立したスコープの使用の概念親スコープの動作を使用します

&演算子はメソッドです

<!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>
ログイン後にコピー

Angular での独立したスコープの使用の概念 理解方法:

命令が内部でどのように実装されているかに関係なく、まずその使用方法を見て、次に対応する親スコープ内の変数またはメソッドがどのように定義されているかを見てください。


この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

angular でのscopel ディレクティブの使用の詳細な説明


Angular マテリアルの使用の詳細な説明

angularjs での $apply() の使用の詳細な説明

以上がAngular での独立したスコープの使用の概念の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
angular 範囲 コンセプト
ソース：php.cn
前の記事：angularjs での $apply() の使用方法の詳細な説明 次の記事：Node.js コードの実行方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Angular 7 は SCSS の重複した属性を削除します AngularSASS (.scss) はプロパティを削除します。ブラウザ間の互換性のために重複した属性を埋め込むことができるように、この問題の発生を防ぐにはどうすればよいですか?...
から 2024-04-04 23:28:54
0
1
1382
Angular アプリケーションで Javascript プロトタイプ コンストラクターをインポートするとエラーがスローされる コンストラクターを含む JS ファイルをインポートしようとしている Angular アプリケーションがあります。しかし、アプリケーションを実行すると、webpack がエラーをスロ...
から 2024-04-04 11:36:15
0
1
288
Ajax を使用したコンテンツの生成 - ID までスクロールできない ajax経由で取得したデータに基づいてページコンテンツを生成します。私が抱えている問題は、特定の ID までスクロールしたいときに、スクロールが起こらないか、間違った場所にスクロー...
から 2024-04-04 09:29:39
0
1
397
Angular で円形の SVG 温度ドラッガーを作成しますか? これは、Angular で作成しようとしている円形の親指ドラッガーの静的なデモンストレーションです。これは、rinkle-dashoffset="-260" 設...
から 2024-04-03 09:33:29
0
1
376
Angular: テキスト要素の色を理解するためのプロパティ バインディングに反応性がない 以下は私の .ts ファイル、 import{Component}from'@angular/core';@Component({selector:'app-event-bindi...
から 2024-04-01 17:28:52
0
1
358
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート