1

我最近开始开发使用 AngularJS 编写的 Web 应用程序。在其中一个文件中myApp.js，有一个provider定义如下：

.provider('myAppConf', function($routeProvider){
    var constants = {
        'HOMEPAGE': '/alarms',
        ...
    };

    // Setter function for constants
    this.setConstant = function(constant, value){
        constants[constant.toUpperCase()] = value;
    };
    ...
    // Other setter functions
    ...
    // Non- setter/ getter functions:
    this.addElementOverview = function(){
        ...
        var location = 'pages/elementbrowser';
        ...
        return '/' + location;
    }
    function addCreatePageRoute(){
        $routeProvider.when('/pages/create', {
            page: {
                editable: true,
                title: {
                    ...
                },
                layout: {
                    ...
                },
                widgets: [
                    ...
                ]
            }
        });
    }
    // More non- setter/ getter functions
    this.$get = ['$q', '$timeout', 'myAppUI' function($q, $timeout, myAppUI){
        ...
    }];
}).run(function(...){
    ...
});

在网站上的大多数页面上，都有一个“设置”按钮，它会打开一个对话框，用户可以使用该对话框更改给定页面的设置。我已经在该对话框中添加了一个复选框，该对话框在检查时，我想用它来设置将其选中为“主页”页面的页面，覆盖以前是“主页”页面的页面。如果/当再次取消选中该复选框时，应将主页设置回其原始值（即在 中/alarms确定的页面constants）。

就目前的情况而言，我已设法更改主页，以便将其更新为用户选择的页面 - 当单击“主页”时，它们将被带到选中复选框的页面。但是一旦他们退出，他们选择的主页就被忘记了，当他们再次登录时，默认主页是他们的主页，直到他们选择另一个。

我现在想将用户的默认主页设置为他们选择的自定义主页，并尝试使用provider上面函数中定义的“常量设置器函数”。

我通过调用：

myAppConf.setConstant(myAppConf.HOMEPAGE, $location.path());

当在对话框上按下“确认”按钮时（选中“设置为主页”复选框）。

但是，当我按下“确认”按钮时，我的TypeError控制台中会显示：

TypeError: myAppConf.setConstant is not a function

我不明白为什么会出现此错误... setConstant()被定义为具有以下功能的函数：

this.setConstant = function(constant, value){...};

那么为什么控制台说它不是一个函数呢？我怎样才能解决这个问题？

编辑

我正在调用myAppConf.setConstant()的函数在 Pages/ctrls.js 中定义如下：

angular.module('myApp.pagse')
...
.controller('LayoutCtrl', function($scope, $route, $location, $timeout, Page, myAppConf, NotifyMgr, DialogMgr,myAppUI){
    ...
    $scope.confirm = function(e){
        ...
        if($scope.checkboxModel){
            ...
            myAppConf.setConstant(myAppConf.HOMEPAGE, $location.path());
        }else{
            console.log("homepage not changed");
        }
    };
4

1 回答 1

1

setConstant是myAppConfProvider方法，不是myAppConf。如果它应该在配置和运行阶段都可用，它应该在提供者和实例上定义：

.provider('myAppConf', function(){
  ...
  var commonMethods = {
    setConstant: function (constant, value) {
      constants[constant.toUpperCase()] = value;
    },
    ...
  }

  Object.assign(this, commonMethods, {
    $get: function () {
      return commonMethods;
    }
  })
})

一种更清洁的方法是使用constant：

.constant('myAppConf', {
  _constants: { ... },
  setConstant: function (constant, value) {
    this[constant.toUpperCase()] = value;
  },
  ...
})

由于 getter 和 setter 可以被认为是反模式，除非它们是合理的，所以 KISS 替代方案只是：

.constant('myAppConf', {
  'HOMEPAGE': '/alarms',
  ...
})
于 2017-07-11T11:24:54.533 回答