6

AngularJS$rootScopeオブジェクトを使用して、コントローラーとビューの両方にアクセスできる必要があるいくつかのグローバル定数を公開しています。

var app = angular.module('myApp', []);

app.run(function ($rootScope) {
    $rootScope.myConstant = 2;
});

ビューでグローバル値をレンダリングしようとすると、正しく機能します。

{{myConstant}}

同様に、条件でグローバル値を参照すると、ng-ifそれも機能します。

<span ng-if="someValue == myConstant">Conditional content</span>.

ただし、ng-switchブロック内で比較に同じ値を使用しようとすると、true と評価されることはありません。この JSFiddleは、これを機能させるための私の試みを示しています。また、定数値を$rootScope(二重中括弧内の) メンバーおよび式として明示的に参照しようとしましたが、何も機能しません。

私が間違っていることはありますか？

ありがとう、

ティム

4

2 に答える 2

1

あなたはいつでも自分で巻くことができます... :)

（これがどれほど効率的かはわかりませんし、今書いたばかりなので十分にテストされていません）

http://jsfiddle.net/H45zJ/1/

app.directive('wljSwitch', function () {
    return {
        controller: function ($scope) {
            var _value;
            this.getValue = function () {
                return _value;
            };
            this.setValue = function (value) {
                _value = value;
            };

            var _whensCount = 0;
            this.addWhen = function (value) {
                _whensCount++;
            }
            this.removeWhen = function (value) {
                _whensCount--;
            }
            this.hasWhens = function () {
                return _whensCount < -1;
            };
        },
        link: function (scope, element, attrs, controller) {
            scope.$watch(function () {
                return scope.$eval(attrs.wljSwitchOn);
            }, function (value) {
                controller.setValue(value);
            });
        }
    };   
});

app.directive('wljSwitchWhen', function () {
    return {
        require: '^wljSwitch',
        template: '<span ng-transclude></span>',
        transclude: true,
        replace: true,
        link: function (scope, element, attrs, controller) {
            scope.$watch(function () {
                return controller.getValue() === scope.$eval(attrs.wljSwitchWhen);
            }, function (value) {
                if (value) {
                    controller.addWhen();           
                } else { 
                    controller.removeWhen();      
                }
                element.attr('style', value ? '' : 'display:none;');
            });
        }
    };   
});

app.directive('wljSwitchDefault', function () {
    return {
        require: '^wljSwitch',
        template: '<span ng-transclude></span>',
        transclude: true,
        replace: true,
        link: function (scope, element, attrs, controller) {
            scope.$watch(controller.hasWhens, function (value) {
                element.attr('style', value ? '' : 'display:none;');
            });
        }
    };   
});
于 2013-09-03T15:57:15.057 に答える