NG-BIND ディレクティブを使用して ANGULARJS で一方向バインディングを実装する例-PHP开发-php.cn

NG-BIND ディレクティブを使用して ANGULARJS で一方向バインディングを実装する例

高洛峰

リリース： 2016-12-24 09:54:27

オリジナル

1220 人が閲覧しました

AngularJS フレームワークを簡単に紹介した後、この記事では例を使用して {{}} 補間メソッドと ng-bind ディレクティブの使用方法を示します。

フロントエンド開発を強化および簡素化する単なるクラスライブラリである jquery とは異なり、angularjs は完全な Web フロントエンドフレームワークであるため、学習曲線ははるかに高くなります。

angularjs は Java の Spring フレームワークに似ているように思えます。これは中心的なコンテナーの位置にあり、その組み込みコンポーネントの多くはすでに一般的なシナリオに対応でき、フレームワークのアイデアに従って拡張できます。

最も基本的なコンテンツから始めましょう:

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-bind directive</title>
</head>
<body ng-controller="HelloController">
<div>
    <p>直接输出字符串字面值</p>
    Hello {{"World"}}
    <hr>
</div>
<div>
    <p>使用占位符输出变量</p>
    Hello {{greeting}}
    <hr>
</div>
<div>
    <p>使用ng-bind指令输出变量</p>
    Hello <span ng-bind="greeting"></span>
    <hr>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
    function HelloController($scope) {
        $scope.greeting = "World";
    }
</script>
</body>
</html>

ログイン後にコピー

ng-app は angularjs モジュールを宣言し、HTML タグを宣言する範囲に限定されます。

ng-controller はモジュール内で angularjs コントローラーを宣言します。複数のコントローラーが存在する可能性がありますが、コンテキストは分離されているため、コントローラーのスコープは可能な限り狭くする必要があります。

{{}} は angularjs の補間構文で、JSP の EL 式 ${} に似ています。最初の出力は、「World」がリテラル値であり、プログラムがそれを直接出力するためです。2 番目の出力は、greeting がコントローラーで定義された変数であるため、その変数に対応する値も出力されます。 World; 3 番目の出力 angularjs の組み込み ng-bind 属性ディレクティブが使用されます。最終結果は {{}} と同等ですが、ディレクティブ = の後に文字列が続くことに注意してください。

js の HelloController は、本体の命令に対応します。入力パラメーター $scope は、フレームワークによって提供されるサービスであり、フレームワークが自動的に挿入する他の同様のサービスがあります。詳細については後で学習してください。メソッド本体には 1 行しかなく、$scope 上の変数を定義します。これは HTML コードで参照される変数です。

この記事は非常に簡単で、コードをコピーするだけで実行できます。 angular.min.js は 1.2 ブランチの最新バージョンであることに注意してください。同じコードはバージョン 1.3.0 では実行できません。これは、1.3.0 が最終リリースバージョンではないことに関連している可能性があります。

NG-BIND 命令を使用して ANGULARJS で一方向バインディングを実装するその他の例については、PHP 中国語 Web サイトの関連記事に注目してください。