ラベル AngularJS の投稿を表示しています。すべての投稿を表示

2016年3月3日木曜日

[AngularJS1.3]One-Time Data Binding(一回だけ値をバインドして、変更は監視しない)

AngularJS1.3から、One-Time Data Bindingなるモードが増えたらしい（知らなかった）。

これは、初回の一度のみデータをバインドして、その後モデルに変更があってもバインド済みの箇所の値は変更されないらしい。
データの変更監視がなくなる分、パフォーマンスが良くなるらしい。

使い方は、下のコードのように::を付加するだけなので簡単です。

この例だと、入力欄の値が変更されても::app.nameの部分は値が変更されません。
あと、ng-repeatの部分もapp.usersに要素が増えたとしても初期表示のまま変更されません。

<p>{{ app.name }}</p>
  <p>{{ ::app.name }}</p>
  <input type="text" ng-model="app.name">

  <div ng-repeat="user in ::app.users">
    <p>{{ user.name }}</p>
  </div>

2015年9月18日金曜日

Angularでテンプレートを切り替えたタイミングで、Material Design Liteのコンポーネントを更新する

AngularJSとMaterial Design Liteを組み合わせて使った場合で、Angularのrouteを使ってtemplateを切り替えた場合、
切り替えて出力されたmdlコンポーネントの初期化処理が実行されない問題が発生した。

この問題を回避するには、templateを切り替えたタイミングでcomponentHandler.upgradeDom();を呼び出してあげれば良い。
参考サイト

例

    angular.module('app', ['ngRoute', 'ngResource'])
        .run(function ($rootScope, $location, $timeout) {
            $rootScope.$on('$viewContentLoaded', function () {
                $timeout(function () {
                  componentHandler.upgradeAllRegistered();
            });
        })
    })

2014年4月29日火曜日

[AngularJS]ng-initを使用して初期値の設定

ng-initディレクティブを使用して、初期値の設定が出来る。

コード

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>ng-init</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init="hello = 'Hello'" >
  {{hello}} World!!<br/>

  <label>入力欄
    <input type="text" ng-model="hello">
  </label>
</div>
</body>
</html>

実行結果

2014年1月26日日曜日

AngularJSでHello World

http://docs.angularjs.org/cookbook/helloworldを見つつAngularJSでHello Worldをやってみた。
Controllerのロジックは、CoffeScriptにしてみたぐらいで、後は上記のサイトの内容通り。

html

ポイントは、htmlタグでng-appディレクティブを記述しているところ。
これで、htmlタグはいかがAngularJSアプリとなる。

<!DOCTYPE html>
<html ng-app="">
<head>
  <meta charset="utf-8" />
  <title>AngularJSでHello World!!</title>
</head>
<body>
<div ng-controller="HelloController">
Your name: <input type="text" ng-model="name"/>
<hr />
Hello {{name || "World"}}!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="hello.js"></script>
</body>
</html>

JavaScript

htmlのng-controllerディレクティブで指定したControllerに対応するfunctionを定義する。

CoffeeScriptだと関数がグローバルスコープとならないので、関数名の頭に@をつけたりwindowオブジェクトに作成してあげる必要がある。
ちょっとイケてない感じなのが残念。

このJavaScriptでは、コントローラのスコープ($scope)内にname属性を定義して'World'を代入しています。

@HelloController = ($scope) ->
  $scope.name = 'World'

実行結果

JavaScriptでname属性に設定した値が、「Hello {{name || 'World' }}!」部に出力される。

Your name:

Hello {{name || "World"}}!