何となく分かった気持ちになる AngularJS のカスタムディレクティブ - Qiita
カスタムディレクティブを作るに当たって、覚えておくプロパティがいくつかある。 ディレクティブ ng_service/$compile プロパティ一覧にすると restrict priority template templateUrl replace transclude scope controller require compile link となっている。 相変わらず公式の説明が取っつきづらく、かつ意外と奥が深いので、かみ砕きつつサンプルと一緒に載せておく。 ちなみに AngularJSアプリケーション開発ガイド はわりと役に立つので AngularJS をやるならおすすめの一冊です。 Ebook 版を買っていたのに書籍版も何故か買ってしまったので誰か書籍版を僕から買い取ってください。 restrict HTML 側でディレクティブを呼び込むための形式を定義するプロパティ 複数指定も
AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
ここらでDirective Scopeの@=&をまとめておきたいと思う - Qiita
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample</title> </head> <body ng-app="myApp"> <div ng-controller="SampleCtrlA"> <dir-a my-arr="arr"><span ng-repeat="a in arr">{{a}},</span></dir-a> </div> <div ng-controller="SampleCtrlB"> <dir-b my-arr="arr"><span ng-repeat="a in arr">{{a}},</span></dir-b> </div> <div ng-controller="SampleCtrlC"> <dir-c my-arr="arr"><span ng-re
AngularJSでの開発環境を作る（yeomanで自動生成されたファイルたちを調べる） - おっさんエンジニアの備忘録
前回作成したAngularJSのアプリのひな形でどんなファイルができているかをいろいろ調べてみようと思います。 app/ それぞれアプリーケーションソースとテストケースが格納されています。 詳しくは次回以降に見ていきたいと思いますので、今回はスキップ。 test/ 同じくテストケースが格納されているディレクトリです。 ちなみにgenerator-angularでcontrollerやdirectiveを追加すると、こちらのディレクトリにテストケースのひな形が自動的に追加されます。 $ yo angular:controller piyo create app/scripts/controllers/piyo.js create test/spec/controllers/piyo.js $ yo angular:directive fuga create app/scripts/direc
AngularJS 入門 - Directive - Qiita
前回の続きです。 今回はDirective（ディレクティブ）についてです。 ngModelやngRepeatなどを既に使っているのでディレクティブがどんなものかは大体分かっているかと思います。 ビルドインのディレクティブ一覧 => http://docs.angularjs.org/api/ng#directive なので早速ですがディレクティブを作ります。 単純なディレクティブ レイアウトを持たず、動作を追加するディレクティブを作ってみます。 ちょうどTwitter Bootstrapが雛形に使われているので、リンクにツールチップを追加します。 <p> <input type="text" ng-model="world"> <span ng-click="addFramework(world)" class="btn btn-primary">Add</span> </p> <p>He
AngularJS の directive の中で scope を扱う - Qiita
app.directive('counter', function () { return { restrict: 'E', scope: { onCountup: '&', current: '=', prefix: '@' }, template: '<div>click here</div>', link: function ($scope, element, attrs) { var n = 0; element.on('click', function () { $scope.onCountup(); $scope.current = $scope.prefix + (++n).toString(); $scope.$apply(); }); } }; }); <div>{{countup}}</div> <div>{{countdown}}</div> <counter pre
Angular.js入門 (5)ディレクティブ その2 - Qiita
前回: Angular.js入門 (4)ディレクティブ その1 DirectiveとControllerの連携 ディレクティブとコントローラとで値を共有したいときはどうすれば良いのでしょう？ 結論から言うとスコープを通じて渡してやれば良いです。 具体的には var app = angular.module("myApp", []); app.controller("AppCtrl", function ($scope) { $scope.alertTest = function() { alert("テストだよ！"); }; }); こんなコントローラの, alertTest関数をdirective内で使いたいとしましょう。コントローラAppCtrlのスコープ配下ではalertTestという関数が生きていることになるのでhtml側で以下のように記述します。 <!doctype html>
AngularJSを導入することと、恋のときめきと一歩踏み出す苦しみと。 - Wantedly Engineer Blog
春です。 こんにちは、春ですね。 いつから春なんだっけと思って、近くの人に聞いてみたら「花粉が飛んだら春」だそうです。 来てますね、春。 春には花粉以外にも、「ときめき」が飛び交います。 朝のあの子の挨拶だったり、最近通い始めたスタバの店員さんの笑顔、そして、 Angular.jsのUIバインディングのスマートさにときめきます。 「あの子と話せたらハッピーだろうな」、「うちのサイトのDOMもバリバリ動かしたらカッコいいだろうな」 とか春の陽気はポジティブな妄想を誘います。 ただ、その妄想を現実に落としこむは簡単なことではなく、冬までに降り積もったシガラミが邪魔をします。 中学時代に奇跡的にもらったラブレター、押入れに密かにしまわれているトレーディングカード、 そして、jQueryで書かれたコードだったりが邪魔します。でも、変わらなくちゃ手に入れられないものもあります。 AngularJSを
AngularUIってどんなもの？ - The Round
注：古い記事の為、内容が最新ではない可能性がありますm(＿ ＿)m どうもマツウラです。 AngularJSでUIを扱うために何か良いものがないか！？ということでAngularUIについてサラッと調べてみました。 AngularUIはAngularJSのコンパニオンスイートです。 名前の通り、UIに関するさまざまな機能を提供してくれます。 AngularUIは単にプロジェクト名です。 実際の機能を持っているのは下記にある個々のパッケージです。 UI-Utils 外部依存関係を持たないユーティリティ・パッケージ。 以下のモジュールはUI-Utilsに含まれますが、独立しているので個々に使うことができます。 IE Shiv カスタムエレメント（<ng-view></ng-view>とかですね。）をサポートしていないIEをサポートする。 Event Binder AngularJSでサポートされ
AngularJS Directive チュートリアル STEP1〜STEP5 - A Memorandum
Step0 事前準備 index.html <!doctype html> <html lang="ja" ng-app="app"> <head> <meta charset="utf-8"> <title>My HTML File</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-controller="AppCtrl"> <p>{{value}}</p> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> <script src="controllers.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
