読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

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

AngularJS1.5.x AngularJS JavaScript

スポンサードリンク

未解決。ログ残しです。

(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();
            };

        }]);

上の2つのcontrollerのNavigationFlagValue.inputFormPartsTextの値は共有されているけど、InputFormPartsTextControllercontrollerのthis.flagは共有されていないっぽい。。。orz