Question

我有这个工厂：

.factory('Options', function () {
    var getOptions = function () {
        var storageData = sessionStorage.siteOptions;

        if (storageData !== 'undefined')
            return angular.fromJson(storageData);

        return {
            rotateBackground: false,
            enableMetro: true
        };
    };

    var saveOptions = function (options) {
        sessionStorage.siteOptions = angular.toJson(options);
    }

    return {
        get: getOptions,
        save: saveOptions
    };
});

在我的个人资料页面上正常工作：

.controller('ProfileController', ['Options', function (options) {
    var self = this;

    self.options = options.get();
    self.save = function () {
        options.save(self.options);
    }
}]);

html看起来像这样：

<div class="row" ng-controller="ProfileController as profile">
    <div class="large-4 columns">
        <h2>Site options</h2>

        <form name="optionsForm" ng-submit="profile.save()" role="form">
            <div class="row">
                <div class="large-12 columns">
                    <input id="enable-metro" type="checkbox" ng-model="profile.options.enableMetro"><label for="enable-metro">Enable metro design</label>
                </div>
                <div class="large-12 columns">
                    <input id="enable-background-rotate" type="checkbox" ng-model="profile.options.rotateBackground"><label for="enable-background-rotate">Enable rotating background</label>
                </div>
                <div class="large-12 columns">
                    <button class="button">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

但我有另一个页面，其中有一个控制器需要知道是否保存了选项。基本上，如果曾经调用 saveOptions ，那么我需要任何查看要通知的选项的页面。原因如下：

.controller('MetroController', ['Options', function (options) {
    scope.options = options.get();

    scope.$watch(function () {
        return options.get();
    }, function () {
        scope.options = options.get();
    });
}])

// ---
// DIRECTIVES.
// ---

.directive('metro', function () {
    return {
        restrict: 'A',
        controller: 'MetroController',
        controllerAs: 'metro',
        link: function (scope, element, attr) {
            scope.$watch(function () {
                return metro.options.enableMetro;
            }, function (enableMetro) {
                if (enableMetro) {
                    element.addClass('metro');
                } else {
                    element.removeClass('metro');
                }
            });
        }
    }
});

如您所见，这是尝试应用基于 enableMetro 标志的类。但是当我运行它时，我得到一个关于迭代量不得不循环的错误。有人可以帮我这个吗？

Answer 1

我想我已经解决了这个问题。我将选项工厂更改为：

.factory('Options', function () {
    var getOptions = function () {
        var storageData = sessionStorage.siteOptions;

        if (storageData !== 'undefined')
            return angular.fromJson(storageData);

        return {
            rotateBackground: false,
            enableMetro: true
        };
    };

    var saveOptions = function (options) {
        sessionStorage.siteOptions = angular.toJson(options);

        current = getOptions();
    }

    var current = getOptions();

    return {
        current: current,
        save: saveOptions
    };
});

然后在我的控制器中，我刚刚这样做了：

.controller('MetroController', ['$scope', 'Options', function ($scope, options) {
    var self = this;

    self.options = options.current;

    $scope.$watch(function () {
        return options.current;
    }, function () {
        self.options = options.current;
    });
}])

// ---
// DIRECTIVES.
// ---

.directive('metro', function () {
    return {
        restrict: 'A',
        controller: 'MetroController',
        link: function (scope, element, attr, controller) {
            scope.$watch(function () {
                return controller.options.enableMetro;
            }, function (enableMetro) {
                if (enableMetro) {
                    element.addClass('metro');
                } else {
                    element.removeClass('metro');
                }
            });
        }
    }
});

这似乎工作正常。

AngularJS绑定问题和迭代循环

1 个答案: