検索
ホームページウェブフロントエンドjsチュートリアルAngularJS 組み込みディレクティブ_AngularJS

ディレクティブは、AngularJS が HTML 要素を操作する方法として理解しています。
AngularJS を学習する最初のステップは、このノードがアプリケーションのルート ノードであることを示す組み込みディレクティブ ng-app を作成することなので、このディレクティブはすでによく知られています。

このブログでは、いくつかの組み込みコマンドを簡単に記録します。まずそれらを使用してから、いくつかの興味深い点について説明します。

組み込みコマンド

すべての組み込み命令には ng という接頭辞が付けられます。競合を避けるために、カスタム命令でこの接頭辞を使用することはお勧めできません。
いくつかの一般的な組み込みコマンドから始めます。
まず、主要な組み込み命令をいくつか挙げて、スコープの問題について簡単に説明します。

NG モデル

フォーム コントロールを現在のスコープのプロパティにバインドすることが正しくないようです。
ただし、今のところは表現について心配する必要はありません。使用すると理解しやすくなります。たとえば、

コードをコピーします コードは次のとおりです:



{{someModel.someProperty}}

ng-init

このディレクティブは呼び出されたときに内部スコープを初期化します。
このコマンドは通常、デモなどの比較的小規模なアプリケーションで使用されます...

コードをコピーします コードは次のとおりです:


私は{{仕事}}
です

ng-init に加えて、さらに優れたオプションがあります。

NG アプリ

AngularJS を使用するときは、このコマンドが欠かせません。
ng-app を宣言する要素は $rootScope の開始点となり、$rootScope はスコープ チェーンのルートであり、通常は で宣言されます。
つまり、ルートの下にあるすべてのスコープがアクセスできます。
ただし、$rootScope を過度に使用することはお勧めできません。そうしないと、グローバル変数があらゆる場所に存在し、非効率になり、管理が難しくなります。
以下に例を示します:

コードをコピーします コードは次のとおりです:



{{ someProperty }}


var myApp = angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.someProperty = 'こんにちはコンピューター';
});


ng-コントローラー

このコマンドを使用して、DOM 要素にコントローラーをインストールします。
コントローラー? 確かに、文字通りに理解するのは良いことですが、なぜコントローラーが必要なのでしょうか? AngularJS 1.2.x では、次のようにコントローラーを定義できることを思い出してください...

コードをコピーします コードは次のとおりです:
関数 ohMyController($scope) {
//...
}

このメソッドは AngularJS 1.3.x では禁止されています。このメソッドを使用するとコントローラーが空を飛び回り、すべてが $rootScope にハングされるため、レベルを区別できなくなります。

さらに、$scope は、$rootScope を含む上位の $scope のメソッドとプロパティを継承するために使用されます。
以下は単純な例です。祖先は子のスコープにアクセスできません。

コードをコピーします コードは次のとおりです:

{{ 先祖名 }}
{{ childName }}

{{ 先祖名 }}
{{ childName }}



var myApp = angular.module('myApp', [])
.controller('ChildController', function($scope) {
$scope.childName = '子';
})
.controller('AncestorController', function($scope) {
$scope.ancestorName = '先祖';
});


スコープの問題はそれを超えて、今は脇に置いて、他の組み込み命令を見てみましょう。

NG 形式

最初はなぜ form コマンドがあるのか​​分かりませんでしたが、

タグは十分役に立ちそうです。
フォーム検証を例に挙げると、前の記事には次のコードがあります:

コードをコピーします コードは次のとおりです:


つまり、フォームのステータスが $invalid の場合、送信ボタンは無効になります。
シナリオがもう少し複雑な場合、たとえば、親フォームに複数のサブフォームがあり、サブフォームの 3 つの検証に合格したときに親フォームを送信できます。
ただし、

はネストできません。
このシナリオを考慮して、ng-form ディレクティブを使用してこの問題を解決します。
例:

コードをコピーします コードは次のとおりです:



名前:

ID 番号:




ガーディアン名:

ガーディアン ID 番号:



NG-無効

このような、出現している限り有効な属性については、AngularJS で true/false 式を返すことで有効にすることができます。
フォーム入力フィールドを無効にします。

コードをコピーします コードは次のとおりです:


ng-readonly

式の戻り値 true/false を使用して、フォーム入力フィールドを読み取り専用に設定します。
例として、3 秒後に読み取り専用になります。

コードをコピーします コードは次のとおりです:


.run(function($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$timeout(function(){
$rootScope.stopTheWorld = true;
},3000)
})

NG チェック済み

これは などに使用します。

コードをコピーします コードは次のとおりです:


NG が選択されました

は、

コードをコピーします コードは次のとおりです:



フルスタックエンジニアです





選択>

NG-show/NG-Hide

式に基づいて HTML 要素を表示/非表示にします。これらは非表示であり、DOM から削除されないことに注意してください。例:

コードをコピーします コードは次のとおりです:


1 1=2


あなたには私が見えません。

変更不可

HTML のような onXXX ではなく、ng-XXX です。
ng-model と組み合わせて使用​​されます。例として ng-change を取り上げます:

コードをコピーします コードは次のとおりです:


{{ calc.result }}

または ng-options のようなもの

{{}}

実際、これも ng-bind と似たコマンドですが、ページのレンダリングが少し遅い場合に発生することがあります。
また、{{}} のパフォーマンスは ng-bind に比べてはるかに劣りますが、使用すると非常に便利です。

ng-バインド

ng-bind の動作は {{}} と似ていますが、このコマンドを使用して、レンダリング解除によって引き起こされるちらつきである FOUC (レンダリングされていないコンテンツのフラッシュ) を回避できる点が異なります。

NG-マント

ng-cloak も FOUC を解決してくれます。 ng-cloak は、ルートが対応するページを呼び出すまで内部要素を非表示にします。

ng-if

ng-if の式が false の場合、対応する要素は非表示ではなく DOM から削除されますが、要素を検査すると式がコメントになっていることがわかります。
フェーズが非表示の場合は、ng-hide を使用できます。

コードをコピーします コードは次のとおりです:


要素をレビューできません


検閲される可能性があります

ng-switch

単独で使用しても意味がありません。例を次に示します。

コードをコピーします コードは次のとおりです:


0


1


2


3



ng-repeat

なぜ iterate と呼ばれないのかわかりません。要するに、次のように、コレクションを走査し、各要素のテンプレート インスタンスを生成します。

コードをコピーします コードは次のとおりです:

$index
$first
$last
$middle
さえ
奇数

説明する必要はありませんが、これらが何であるかは簡単にわかります。例を示します。

コードをコピーします コードは次のとおりです:


  • {{char.alphabet}}


ng-href

最初にテキストフィールドに ng-model を作成し、href に次のように を書きました。
実際、href と ng-href の間に違いはないので、これを試すことができます:

コードをコピー コードは次のとおりです:


.run(function($rootScope, $timeout) {
$rootScope.linkText = 'まだロードされていないため、クリックできません';
$timeout(function() {
$rootScope.linkText = 'クリックしてください'
$rootScope.myHref = 'http://google.com';
}、2000);
})

ng-src

同様に、式が有効になる前にリソースをロードしないでください。
例 (追記: 素敵な写真です!):

コードをコピーします コードは次のとおりです:

AngularJS 組み込みディレクティブ_AngularJS
.run(function($rootScope, $timeout) {
$timeout(function() {
$rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}、2000);
})

NG クラス

スコープ内のオブジェクトを使用してクラス スタイルを動的に変更します。例:

コードをコピーします コードは次のとおりです:


.red {背景色: 赤;}
.blue {背景色: 青;}



番号は: {{ x }}



.controller('CurTimeController', function($scope) {
$scope.getCurrentSecond = function() {
$scope.x = new Date().getSeconds();
};
})

以上がこの記事で説明した内容のすべてです。皆さんに気に入っていただければ幸いです。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか?pythonまたはjavascriptの方がいいですか?Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか?JavaScriptをインストールするにはどうすればよいですか?Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

クォーツでタスクが開始される前に通知を送信する方法は?クォーツでタスクが開始される前に通知を送信する方法は?Apr 04, 2025 pm 09:24 PM

Quartzタイマーを使用してタスクをスケジュールする場合、Quartzでタスク通知を事前に送信する方法、タスクの実行時間はCron式によって設定されます。今...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。