Angular JS で View を伴う Service 的なことをしたいとき、あるいは Directive に Controller をつけたいとき。
クソコード を書いたはいいが、釈然としなかった。 "View independent business logic: Services" とドキュメントに書いてある通りなので、やはり他のやりかたのほうがよい。のでよくよく読んだところ、やはり View にかかわる部分は Directive に集約されるようだ…… しかし使いかたが非常に難しい。
iimsApp.directives.directive('dialog', function ($q) {
return {
restrict: 'E',
transclude : true,
scope : {
Dialog : '=name'
},
controller : function ($scope) {
$scope.Dialog = {
open : function (title) {
$scope.deferred = $q.defer();
$scope.title = title;
$scope.show = true;
return $scope.deferred.promise;
}
};
$scope.close = function () {
$scope.show = false;
};
$scope.ok = function () {
$scope.close();
$scope.deferred.resolve();
};
$scope.cancel = function () {
$scope.close();
$scope.deferred.reject();
};
},
templateUrl : '/static/js/app/dialog.html'
};
}); こんな感じで dialog という directive を定義して、
<div ng-controller="FooCtrl">
<dialog name="FooBarDialog">
{{ message }}
</dialog>
</div> というふうにすると、FooCtrl のスコープから FooBarDialog というプロパティで見えるようになる。つまり
$scope.message = "Hello!";
$scope.FooBarDialog.open('OKK!!!!!').then(function () {
alert('ok');
}, function () {
alert('cancel');
}); みたいなあ
難しポイント
- restrict: 'E'
- この directive は要素として使うよってこと
- directive の scope の定義がむずかしい
- プロパティ名には自分のスコープで見える名前、値には謎の書式で親スコープから見える名前が書いてある属性名を書く
- controller に渡される $scope
- 親スコープなどからは分離されているスコープが与えられる。directive が何度も出現することもあるからね!
- transclude: true の意味。これは dialog 要素内に内包される変数が、外側のスコープをさすようにするもの。例では $scope.message を外側のスコープで代入している
こういう謎の構造体を返すのってわっかりにくいので気持ち悪いなあて思いました。全部メソッドになっているべきなのでは????
directive のプロパティの説明がどこにあるかわかりにくいけど、 http://docs.angularjs.org/api/ng.$compile#description_comprehensive-directive-api_directive-definition-object にある
関連エントリー
- AngularJS で http リクエスト中画面内のボタンを disabled にする とにかく面倒だから全部の http リクエストを監視してボタンをオフにしたい。という要件 いまいちいい方法が思いうかばないけど以下のようにし...
- JSDeferred -> Promise 置き換え方法 もはや Promise がスタンダードに入り、モダンな実行環境ではポリフィルすら必要なく使えるケースが増えましたね。 かくいう自分も JSD...
- Manchester Encoding を JS で WebAudio での通信用に使おうと思って書いていたけど、やる気が失せてしまった。WebAudio 非依存部分だけ習作的に書いた。思ったよ...
- AngularJS の ngResource を既存APIの仕様にあわせる AngularJS には ngResource という拡張があって、サーバに対する API 経由の CRUD 的操作を JavaScript...