読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

AngularJS 1.4を試してみた

AngularJS1.4.x AngularJS JavaScript

スポンサードリンク

AngularJS Hackathon

ドットインストールで試してみた。

dotinstall.com

で、まだまだ全然わからん。。。

とりあえず色々試してみたことをメモ。

model(?)名にハイフン使っちゃダメ

<p>テスト:
  <input type="text" ng-model="test-model">
</p>
<p>結果:{{test-model}}</p>
<input type="text" ng-model="test-model" class="ng-pristine ng-untouched ng-valid">

エラーの見方がわからん。。。

とりあえずハイフン使っちゃダメね。

html文字列をviewに流しこむ

sanitizeの処理を持つjsをロード

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular-sanitize.min.js"></script>

js側で、依存設定を追記

app.controller('app', ['ngSanitize']);

view側で、ng-bind-htmlを使って、表示する箇所を追記。

<p ng-bind-html="user.response"></p>

これで、php(サーバーサイド)でvar_dump()で返す値をhtml表示することができる。

imgタグにパスを流し込みたいときは、src属性ではなくng-srcを使う

最初の{{}}を置換する際に404が発生する。ng-srcを使えばおk。

<!-- <img src="{{user.image}}"> これはNG -->
<img ng-src="{{user.image}}"> <!-- これはおk -->

ng-clickする関数に引数を与える

<button class="btn btn-primary" ng-click="addFunction()">

まぁこんな感じで、ng-clickを使って関数を紐付けます。

こいつに引数を渡したい時。

<button class="btn btn-primary" ng-click="addFunction({{id}})">

みたいに渡せそうですが、これはエラーです。どうやらng-***の中に書いている値には{{}}を使わなくても良いとのこと。

<button class="btn btn-primary" ng-click="addFunction(id)">

これでおk