简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Angularjs のビューとディレクティブの詳細

青灯夜游
リリース： 2021-09-03 18:22:15
転載
1317 人が閲覧しました

この記事では、Angularjs のビューと手順について説明します。お役に立てば幸いです。

Angularjs のビューとディレクティブの詳細

AngularJS のビューとディレクティブの概要

最初の記事では、AngularJS がアプリケーションをビュー、コントローラー、モデルに分割する方法について説明しました。 (MVC)。この記事では、AngularJS ビューの作成方法を詳しく説明します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

始める前に、この記事の例を体験するために使用できる単純な AngularJS アプリケーションをセットアップしましょう: 

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">

  <div ng-controller="MyController" >
      <span></span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      //empty controller function
    });
  </script>

</body>
</html>
ログイン後にコピー

AngularJS ディレクティブ

AngularJS ビューは、モデルのデータを HTML テンプレートに混合します。 AngularJSDirectives を使用して、データを HTML テンプレートに混合する方法を AngularJS に指示できます。この記事では、最も一般的に使用される AngularJS ディレクティブについて説明します。

補間ディレクティブ

補間ディレクティブは、AngujarJS の最も基本的なディレクティブの 1 つです。 。補間ディレクティブは、式の結果を HTML テンプレートに挿入します。 {{ }} 記号を使用して、式を挿入する場所をマークできます。例を次に示します。 

<div ng-controller="MyController" >
    <span> {{myData.text}} </span>
</div>
ログイン後にコピー

HTML テンプレートは、ng-controller 属性を持つ div 要素に含まれています。 HTML テンプレート内には span 要素があり、その中に補間命令があります。このディレクティブは、指定された位置にデータ値を挿入するように AngularJSmyData.text に指示します。

補間ディレクティブは、モデル オブジェクトの関数から返されたデータを補間することもできます。以下に例を示します。 

 <div ng-controller="MyController" >
      <span>{{myData.textf()}}</span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.textf = function() { return "A text from a function"; };
    });
  </script>
ログイン後にコピー

この例では、補間ディレクティブ {{myData.textf()}} がモデル オブジェクト myData.textf()# で呼び出されます。 ## function $scope を実行し、関数から返されたテキストを HTML テンプレートに挿入します。

例でわかるように、

textf() 関数は、コントローラー関数内の $scope.myData オブジェクトに挿入されます。

##ng-bind ディレクティブ

ng-bind

ディレクティブこれは補間ディレクティブの代替です。これを使用するには、AngularJS でデータを挿入する HTML 要素に

ng-bind 属性を挿入します。例を次に示します。 

<div ng-controller="MyController" >
  <span ng-bind="myData.textf()"></span>
</div>
ログイン後にコピー
これにより、myData.text()

関数によって返されたデータが

span 要素の本体に挿入されます。属性 {{ }} 内の式を囲む ng-bind は必要ないことに注意してください。 モデルからの HTML のエスケープ

モデルから取得したデータに HTML 要素が含まれている場合、これらの要素は HTML テンプレートに挿入される前にエスケープされます。エスケープとは、HTML が HTML ではなくテキストとして表示されることを意味します。

これは、HTML インジェクション攻撃を防ぐために行われます。たとえば、チャット アプリケーションでは、

人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！