未解決。ログ残しです。
(function() { 'use strict'; angular.module('Editor', [ 'Editor.controllers', 'Editor.components', 'Editor.services' ]); angular.module('Editor.controllers', ['ngAnimate']) .controller('navigation', ['NavigationFlagValue', function(NavigationFlagValue) { this.inputFormPartsTextToggle = function() { NavigationFlagValue.inputFormPartsText = !NavigationFlagValue.inputFormPartsText; }; }]) .controller('InputFormPartsTextController', ['NavigationFlagValue', function(NavigationFlagValue) { this.flag = NavigationFlagValue.inputFormPartsText; this.upperName = function() { this.name.toUpperCase(); }; }]); /** * Components */ angular.module('Editor.components', []) .component('inputFormPartsText', { bindings: { name: '=' }, template: '<div ng-show="$ctrl.flag">' + ' <label for="test">テスト</label>' + ' <input type="text" name="test">' + ' <input type="submit" name="send">' + '</div>', controller: 'InputFormPartsTextController', controllerAs: '$ctrl' }) /** * Services */ angular.module('Editor.services', []) /** * 各エディタのwindow表示管理 */ .value('NavigationFlagValue', [function() { return { inputFormPartsText: true } }]); })();
とあるプロジェクトでangularjsを使って簡単なデモアプリを作ろうとした。componentの使い方がわからないので、その辺にあるデモソースをコピーして改変して使ってみた。
やりたいこととして、NavigationFlagValue
サービスの値inputFormPartsText
値がtrue
になったら、inputFormPartsText
コンポーネントが(ng-show
で)表示されるということがしたい。
単純にナビゲーションでクリックしてフォームの表示のオン・オフを切り替えたいだけのデモアプリ。
しかし、上の処理はうまく動きません。
指定の箇所でundefined
になるのです。宣言してDI(これもよくわかっていないけど)しているのなんで?
.controller('InputFormPartsTextController', ['NavigationFlagValue', function(NavigationFlagValue) { this.flag = NavigationFlagValue.inputFormPartsText; // ここがundefinedになる this.upperName = function() { this.name.toUpperCase(); }; }]);
ずぅーーーーーーーーーーーーーーっと参考サイトやAngularJs事例・採用サイトを覗いていましたが、いまいちよくわかりません。
ただ、気になった記事として
下記のように、plusとminusを組み合わせたplus_minusというサービスを作りたいが、plus_minus内からplusやminusは参照することができない。
むむむ? value
メソッドは共有するときに向いていないのかな。
ということで、factory
に変更してみた。
/** * Services */ angular.module('Editor.services', []) /** * 各エディタのwindow表示管理 */ .factory('NavigationFlagValue', [function() { return { inputFormPartsText: true } }]);
うまくいったぁあああああああああ!!!
何故かは知らん。いつかわかったときにフィードバックします。
あ
.controller('navigation', ['NavigationFlagValue', function(NavigationFlagValue) { this.inputFormPartsTextToggle = function() { NavigationFlagValue.inputFormPartsText = !NavigationFlagValue.inputFormPartsText; }; }]) .controller('InputFormPartsTextController', ['NavigationFlagValue', function(NavigationFlagValue) { this.flag = NavigationFlagValue.inputFormPartsText; // ここがundefinedになる this.upperName = function() { this.name.toUpperCase(); }; }]);
上の2つのcontrollerのNavigationFlagValue.inputFormPartsText
の値は共有されているけど、InputFormPartsTextController
controllerのthis.flag
は共有されていないっぽい。。。orz