【AngularJS1.5】値の共有をvalueじゃうまくいかなくてfactoryにしたらうまくいった

未解決。ログ残しです。

(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事例・採用サイトを覗いていましたが、いまいちよくわかりません。

ただ、気になった記事として

qiita.com

下記のように、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();
            };

        }]);