JavaScript- 调用提供者内部定义的函数

Question

我最近开始开发用 AngularJS 编写的网络应用程序。在其中一个文件 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(...){
    ...
});

在该站点的大部分页面上，都有一个 'settings' 按钮，它会打开一个对话框，用户可以使用该对话框更改给定页面的设置。我在该对话框中添加了一个复选框，选中该复选框后，我想将其选中的页面设置为 'home' 页面，覆盖之前为 'home' 页面的页面。如果/再次取消select复选框时，主页应设置回其原始值（即constants中确定的/alarms页面）。

按照目前的情况，我已经设法更改了主页，以便将其更新到用户编辑的页面 select- 当点击 'Home' 他们被带到select 复选框所在的页面。但是一旦他们注销，他们选择的主页就会被忘记，当他们再次登录时，默认主页就是他们的主页，直到他们 select 另一个

我现在想将用户的默认主页设置为他们选择的自定义主页，并尝试使用上面 provider 函数中定义的 'setter function for constants'。

我已通过调用完成此操作：

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

当在对话框中按下 'Confirm' 按钮时（选中 'set as homepage' 复选框）。

但是，当我按下 'Confirm' 按钮时，我在控制台中看到一个 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");
        }
    };

Answer 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',
  ...
})

JavaScript- 调用提供者内部定义的函数

JavaScript- calling a function defined inside a provider

javascript

angularjs

function

angularjs-provider