まず大前提として。
1, ngAppディレクティブの入れ子は出来ません。
2, angularは一番はじめに見つけたngApp以外は自動で起動してくれません。
というのを踏まえると入れ子は厳禁、そして2つ目以降のアプリケーションは自分で起動する必要がある。
のでこうする。
// jQueryが読み込まれていると仮定
angular.element(document).ready(function() {
angular.bootstrap($('.targetElement'), ['myApp']);
});
angular.bootstrap()の第1引数にはngApp属性が指定されているエレメントを渡す。
※この例ではjQueryが読み込まれていることを前提として$関数にセレクタを渡し、エレメントを参照させている。
そして第2引数に起動したいアプリケーション名（今回はmyAppと仮定）を指定すれば良い。
これで複数のアプリケーションを起動させることが出来る。
引数に配列を渡せばOK。
<ul>
<li ng-repeat="item in lists | orderBy: ['name', 'number']"></li>
</ul>
的な感じ。
いつも調べてしまうけれど、下記ファイルにかなりわかりやすい説明が書いてあることを知ったのでメモ。
/etc/crontab
vimなどで閲覧すると下記のようになっている。
# For details see man 4 crontabs # Example of job definition: # .---------------- minute (0 - 59) # | .------------- hour (0 - 23) # | | .---------- day of month (1 - 31) # | | | .------- month (1 - 12) OR jan,feb,mar,apr ... # | | | | .---- day of week (0 - 6) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat # | | | | | # * * * * * user-name command to be executed
これは相当わかりやすいね。覚えておくと幸せになれそう。
chromeでエラーになっていたのできになって調べた所、jQuery1.9以降でデバッガーを拡張するためのやーつーらしい。
解決策は2つあってjQueryをgoogleなどのホスティングサービスからもってくるか、ローカルにjquery.min.mapを持つかのいずれか。
ホスティングサービスを利用すると、同一階層にmapファイルを配置しておいてくれているのでエラーがでなくなる。
まぁおとなしくホスティングサービス使っとけってこった。
要素の操作をしていて気づいたのでメモ。
■ng-if
要素そのものが削除されたり、生成されたりする。
■ng-show、ng-hide
要素は出力されているままで、スタイルのみで表示、非表示が切り替えられる。
要素そのものに動作を割り当てたい時（draggableなど）とかは使い分けが必要。
Angular1.2まではng-bind-html-unsafeがあったけど1.3からは削除されているので、$sceを用いて出力を行う。
// $sceサービスが注入されているのは前提 var text = '<hr>'; $scope.text = $sce.trustAsHtml(text);
これでOK。
stackさんの回答とかを参考に自分が使いやすく。
coreApp.filter('parseUrl', function($sce) {
var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/gi;
return function(text, target, style) {
style = style || null;
angular.forEach(text.match(urlPattern), function(url) {
if (style) {
text = text.replace(url, '<a target="' + target + '" href='+ url + ' style="' + style + '">' + url + '</a>');
} else {
text = text.replace(url, '<a target="' + target + '" href='+ url + '>' + url + '</a>');
}
});
return $sce.trustAsHtml(text);
};
});
使い方は引数を見てもらえれば一目瞭然だよね。
ので注意が必要。
<a ng-click="hoge()" ng-disabled="true">ほげ</a>
これ、反応しちゃうよん。
おとなしくbuttonタグで実装するのが吉。