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

Question

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

我已经通过了JS级DummyClass到一个名为 TLSService 的 angularJS-Service ，我将此服务添加到名为 mLxController 的 angularJS-Controller 中.

我在访问 DummyClass 的变量和方法时遇到问题来自mLxController 。例如，正如您将在下面的代码中看到的，我无法检索类变量 String。我用window.alert(String)检查一下。而不是 DummyClass 中的字符串，窗口中显示“未定义”。

我认为值得一提的是，当添加window.alert("DummyClass calls.")时在 constructor DummyClass的，alert加载相应的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 。尽管我很确定我的解决方案不是值得推荐的做法。

基本上，我将 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按照最初计划的方式。

我想在这里发布代码的最终版本，希望它能帮助像我一样的初学者。

tlsService.js :

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

DummyClass与我在第一个更新中发布的内容保持相同，但它有自己的文件 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 ar 添加到应用程序主 index.html .

Answer 1

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

function(){new DummyClass()}

应该是:

function(){return new DummyClass()}

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

() => new DummyClass()