Question

我的test.js包含：

function test(str) {
    return 'Hello, ' + str + '!'
}

我想在Angular控制器中使用测试方法：

angular.module('testModule')
.controller('testController', ['$scope', function($scope){
    console.log(test('John'))
}

返回Hello, John!

我试过了：

<div ng-app="testModule" ng-controller="testController">
    <script type="text/javascript">
        function test(str) {
            return 'Hello, ' + str + '!'
        }
    </script>
</div>

哪个按预期工作，返回Hello, John!。但尝试从我的其他.js文件引用该方法会返回ReferenceError: ____ is not defined。

如何从Angular控制器中的其他.js文件中调用方法？
调用这些方法的最佳做法是什么？（例如，我是否必须将所有.js文件中的代码转移到Angular的模型或控制器中？）

Answer 1

您应该为单例对象创建service。在生产中，您可以为它提供实时对象，在测试期间，您可以为它提供模拟对象。见http://jsfiddle.net/mendesjuan/E9bU5/235/

您可以直接反对Angular提供的内容，并直接从控制器中使用全局变量（如jQuery或toaster）。

angular.
module('testModule', []).
 controller('testController', ['$scope','test', function ($scope, test) {
   $scope.callTest = function(msg) {
     return test(msg);
   };
 }]).
factory('test', [function() {
   return function(msg) {
     return 'Hello, ' + str + '!';
   } 
}]);

＆＃13;

// Just some global
window.myTest = function() {
    return "I'm in";
};


angular.
module('testModule', []).
 controller('testController', ['$scope','test', function ($scope, test) {
   // This will be easy to test because it's using a service that can be mocked
   $scope.callTest = function(msg) {
     return test(msg);
   };
   // This will be hard to test because it is touching a global
   $scope.myTest = function() {
      return myTest();
   }
 }]).
factory('test', ['$window', function(str) {
   return function(str) {
       return 'Hello, ' + str + '!'
   }
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testModule" ng-controller="testController">
    <!-- Show the name in the browser -->
     <h1>{{ callTest('You') }}</h1>
     <h1>{{ callTest('Me') }}</h1>
     <h1>{{ myTest() }}</h1>
</div>

＆＃13;

Answer 2

首先，在模块中创建服务。（创建服务有几种略有不同的方式，具体取决于您的需求。如果他们愿意，我会让棱角分明的纯粹主义者争论。）

angular.module("testModule")
    .factory("testService", function() {
        return {
            sayHello: function(str) { 'Hello, ' + str + '!';}
        }
    });

然后您可以将该服务注入您的控制器：

angular.module('testModule')
    .controller('testController', ['$scope', 'testService', function($scope, testService){
        console.log(testService.sayHello('John'));
    });

请注意，由于角度处理的注入方式，您不需要按顺序运行它们。您可以先定义控制器，而angular仍会为您注入服务。

如何从Angular中的JS文件中调用方法？

2 个答案: