将 JS-Class 传递给 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-Service，并将此服务添加到名为 mLxController.

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.")时,alert 会在加载相应的 URL 后立即显示.

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-Class 传递给 AngularJS(1.4.x) 服务以使用其变量和函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！