将JS类传递给AngularJS(1.4.x)服务以使用其变量和函数 [英] Passing a JS-Class to AngularJS(1.4.x) service to use its variables and functions

问题描述

我仅将angularJS(1.4)用于前端.

I use angularJS(1.4) for frontend only.

我已将JS类DummyClass传递给名为TLSService的angularJS服务，并将此服务添加到名为mLxController的angularJS控制器中.

I have passed the JS-class DummyClass to an angularJS-Service called TLSService, and I added this service to an angularJS-Controller named mLxController.

从mLxController访问DummyClass的变量和方法时遇到问题. 例如，如下面的代码所示，我无法检索类变量String. 我使用window.alert(String)进行检查. 窗口中显示'undefined'，而不是DummyClass中的字符串.

I'm having problems accessing variables and methods of the DummyClass from the mLxController. For example, as you will see in the code below, I can't retrieve a class variable String. I use window.alert(String) to check that. Instead of the String from the DummyClass, 'undefined' is displayed in the window.

我认为值得一提的是，在DummyClass的constructor中添加window.alert("DummyClass calls.")时，在加载相应的URL后将立即显示alert.

I think it's worth mentioning, that when adding the window.alert("DummyClass calls.") in the constructor of the DummyClass, the alert will immedialtely be shown after loading the corresponding URL.

这是mLxController.js的代码:

angular.module('mApp')
.controller('mLxController', function('TLSService', $scope, $state, $stateParams){
...
//this function is called in `index.html`
$scope.callTLSService = function(){
  window.alert(TLSService.response);
}
...
});

这是dummyClass.js的代码:

class DummyClass {  
  constructor() {
    this.response = "Hi Controller! Service told me you were looking for me.";
  }
}

这里是tlsService.js:

angular.module('mApp').service('TestClaServScript', function(){new DummyClass()});

---

更新:

我设法使DummyClass对mLxController可用. 尽管我很确定我的解决方案不是值得推荐的做法.

I have managed to make the DummyClass usable to the mLxController. Although I'm pretty sure that my solution is not recommendable practice.

基本上，我将DummyClass移到了与TLSService相同的文件中. 另外，DummyClass及其路径在主index.html中不再提及.

Basically, I moved the DummyClass into the same file as the TLSService. Also, DummyClass and it's path isn't mentioned in the main index.html, anymore.

因此，tlsService.js现在看起来像这样:

Accordingly, tlsService.js looks like this, now:

angular.module('mApp').service('TestClaServScript', function(){

    this.clConnect = function(inStr){

        var mDummy = new DummyClass(inStr);
        return mDummy;
    }
});


class DummyClass {

    constructor(inStr){
        this.inStr = inStr;
        this.response = 
            "DummyClass says: \"Hi Controller! Service told me you were looking for me.\"";
        this.charCount = function(inStr){
            var nResult = inStr.length;
            var stRes = "btw, your String has "
            +(nResult-1)+", "+nResult+", or "+(nResult+1)+" characters.\nIDK."
            return stRes;
        }
    }
}

和mLxController.js:

angular.module('mApp')
.controller('mLxController', function('TLSService',$scope,$state, $stateParams){
...
$scope.makeDummyCount = function(){
      var mDummy = TestClaServScript.clConnect("This string is for counting");
      window.alert(mDummy.charCount(mDummy.inStr));
  }
...
});

必须有一种正确导入DummyClass的方法，以便我可以保留单独的文件. 我将做更多的研究，并且我会继续努力.

There must be a way to properly import DummyClass, so that I can keep separate files. I will do some more research and I will keep trying.

更新2:问题已解决

为我的问题提供的答案帮助我以最初计划的方式实施了TLSService.

The provided answer to my question helped me implementing TLSService in the originally planned way.

我想在这里发布代码的最终版本，希望它对像我这样的初学者有所帮助.

I'd like to post the final version of the code here, in hope that it will help some beginner, like I am.

tlsService.js:

angular.module('mApp').service('TLSService', function(){
    this.mCwParam =  function(inputStr){
        return new DummyClass(inputStr);
    }
});

DummyClass保持不变，就像我在第一个更新中发布的一样，但是它又具有自己的文件dummyClass.js.

DummyClass stays the same like I posted it in the first Update, but it has its own file dummyClass.js, again.

mLxController.js:

angular.module('mApp')
.controller('mLxController', function('TLSService', $scope, $state, $stateParams){
...
//this function is called in the mLx-view's `index.html`
$scope.askDummyCount = function(){
  var mService = TLSService.mCwParam("String, string, string, and all the devs that sing.");
  window.alert(mService.charCount());
}
...
});

此外，TLSService和DummyClass也已添加到应用程序主index.html中.

Also, TLSService and DummyClass ar added in the apps main index.html.

推荐答案

原始设置中的一个问题是，当您将类注册为服务时，您没有返回该类的实例:

A problem in your original setup is when you register your class as a service, you're not returning the instance of the class:

function(){new DummyClass()}

应该是:

function(){return new DummyClass()}

自动返回仅在不使用花括号的情况下有效，例如

Autoreturning only works when you don't use curly braces, like

() => new DummyClass()

这篇关于将JS类传递给AngularJS(1.4.x)服务以使用其变量和函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！