クソコード を書いたはいいが、釈然としなかった。 "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 にある
