将 JS-Class 传递给 AngularJS(1.4.x) 服务以使用其变量和函数

Question

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

我已将 JS-class DummyClass 传递给名为 TLSService 的 angularJS- 服务，并将此服务添加到 angularJS-名为 mLxController.

的控制器

我在从 mLxController 访问 DummyClass 的变量和方法时遇到问题。例如，正如您将在下面的代码中看到的，我无法检索 class 变量字符串。我使用 window.alert(String) 来检查。 DummyClass 中的字符串显示在 window 中 'undefined'。

我觉得值得一提的是，在DummyClass的constructor中添加window.alert("DummyClass calls.")时，alert会在加载相应的[后立即显示=103=].

这是 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。虽然我很确定我的解决方案不是值得推荐的做法。

基本上，我将 DummyClass 移动到与 TLSService 相同的文件中。此外，DummyClass 和它的路径在主要 index.html 中不再提及。

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

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，以便我可以保留单独的文件。我会做更多的研究，我会继续努力。

更新 2：问题已解决

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

我想 post 代码的最终版本，希望它能帮助像我这样的初学者。

tlsService.js:

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

DummyClass 与我在第一次更新中 post 编辑的一样，但它有自己的文件 dummyClass.js。

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。

Answer 1

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

的实例

function(){new DummyClass()}

应该是：

function(){return new DummyClass()}

自动返回仅在您不使用花括号时有效，例如

() => new DummyClass()

将 JS-Class 传递给 AngularJS(1.4.x) 服务以使用其变量和函数

Passing a JS-Class to AngularJS(1.4.x) service to use its variables and functions

javascript

angularjs

angularjs-service