若干詰まったのでメモ。
hg-showディレクティブもng-hideディレクティブも、ng-animationによるアニメーションを指定する際は下記の通り指定する。
.ng-hide-add {
}
.ng-hide-remove {
}
てっきりng-show-addとかがあるのかと思ったらなかった件。
【AngularJS】ngShow、ngHideのアニメーションメモ。
【AngularJS】サービスの使い方。
メモ。
まずはサービスを定義。
※中身はすべて例。
angular.module('', []).factory('hogeFugaService', function() {
// returnしたオブジェクトがサービスになる。
return function(data) {
// なんらかのロジックやらなんやら。
}
})
これでhogeFugaServiceというサービスが生成される。
そしてコントローラーで使いたい時は下記のようにサービス名を指定して注入してやる。
angular.module('...').controller('hogeCtrl', function($scope, hogeFugaService) {
// これでhogeFugaServiceを利用出来るようになる。
})
一定の処理をまとめておくのに使えるので非常に便利。
【AngularJS】ServiceとFactoryの違い。
■Service
渡したfunctionをコンストラクタとしてインスタンスを生成、そのインスタンスをサービスに登録する。
■Factory
渡したfunctionをそのままサービスに登録する。
【AngularJS】ng-repeatを使用した際に一瞬、倍の行数レンダリングされる問題。
タイトル通り。
どうやら公式でもバグ？として認識してる模様。
https://docs.angularjs.org/error/ngRepeat/dupes
下記のようにして対応する。
<tr ng-repeat="task in tasks track by $index">
「track by $index」を書いてやると解決する模様。
【AngularJS】ng-includeで読み込んだテンプレート内のng-modelの値を正常に参照する。
ためには、読み込み先のHTMLで下記のように変数を指定してやる。
■親
<div ng-controller="hogeCtrl">
<div ng-include="'/child.html'"></div>
</div>
■子
<input type="text" ng-model="$parent.data.user" name="user">
【AngularJS】Symfony2用のフォームテンプレートを作った。
下記URLを参考にして作ってみた。
https://gist.github.com/romaricdrigon/6291435
■form_theme.html.twig
{# This is an extension of Twig Form Theme #}
{# We redefine form elements, so they are binded with Angular model #}
{% extends "::form_div_layout.html.twig" %}
{# Make data available to current scope as $scope.data - will not work with hidden fields #}
{% block widget_attributes %}
{% spaceless %}
ng-model="$parent.data['{{ full_name }}']" {# we add Angular ng-model #}
id="{{ id }}" name="{{ full_name }}"{% if read_only %} readonly="readonly"{% endif %}{% if disabled %}
disabled="disabled"{% endif %}{% if required %} required="required"{% endif %}{% if max_length %} maxlength="{{
max_length }}"{% endif %}{% if pattern %} pattern="{{ pattern }}"{% endif %}
{% for attrname, attrvalue in attr %}{% if attrname in ['placeholder', 'title'] %}{{ attrname }}="{{ attrvalue|trans({},
translation_domain) }}" {% else %}{{ attrname }}="{{ attrvalue }}" {% endif %}{% endfor %}
{% if value is defined %} ng-init="$parent.data['{{ full_name }}']='{{ value }}'"{% endif %}
{% endspaceless %}
{% endblock widget_attributes %}
{# current controller submit() will called, instead of submitting the form #}
{% block form_start %}
{% spaceless %}
{% set method = method|upper %}
{% if method in ["GET", "POST"] %}
{% set form_method = method %}
{% else %}
{% set form_method = "POST" %}
{% endif %}
<form name="{{ form.vars.name }}" method="{{ form_method|lower }}" {% for attrname, attrvalue in attr %} {{ attrname
}}="{{ attrvalue }}"{% endfor %}{% if multipart %} enctype="multipart/form-data"{% endif %} novalidate>
<input type="hidden" name="_action" ng-init="$parent.action='{{ action }}'" />
{% if form_method != method %}
<input type="hidden" name="_method" value="{{ method }}" />
{% endif %}
{% endspaceless %}
{% endblock form_start %}
※ng-includeで取り込んだテンプレート内ではスコープが再生成されるので$parent.data~としてるところがポイント。
■angular側のフォーム描画部分。
※コントローラーの位置はここでなくても良い
<div
ng-include="formUrl"
ng-controller="FormCntl"
></div>
■コントローラーのJS
coreCtrls.controller('taskEditCtrl', ['$scope', '$routeParams', '$http', '$route', '$templateCache',
function($scope, $routeParams, $http, $route, $templateCache) {
$scope.formUrl = location.pathname + 'api/task/' + $routeParams.id + '/edit';
// フォームデータの入れ物を宣言。
$scope.data = {};
// $scope.actionにポスト先のURLが格納されている。
$scope.submit = function() {
$http.post($scope.action, reconstruction($scope.data)).success(function() {
$templateCache.removeAll();
$route.reload();
});
}
}
]);
※reconstruction()はsymfonyのバリデーションを通過させるためにオブジェクトの構造を構築し直す俺々メソッド。jQuery.ajax()とAngularの$http.post()でサ
ーバー側に送信される構造が違う所為でくっそハマった。
【AngularJS】モデルの初期値をディレクティブから設定する。
普通にインプット要素のvalueに値を設定しても、angularにパースされた時点で初期値としては認識されなくなってしまうので、
ng-initディレクティブを用いてモデルに値をセットする。
<!-- 下記の通りvalue=""に値をセットしてもパースされた時点で無いものとされてしまうのでng-initを使用する --> <input type="text" ng-model="hoge" ng-init="hoge='piyopiyo'" value="piyopiyo">
【AngularJS】Animate.jsを用いてアニメーションさせる。
まずは本体を読み込む。
<link href="animate.css" rel="stylesheet" />
cssを下記の通り定義してみる。
[ng-view].ng-enter {
-webkit-animation: fadeInRight 1s;
animation: fadeInRight 1s;
}
全アニメーション一覧は下記URLを参照。
http://daneden.github.io/animate.css/