如何從Angular的JS文件中調用方法？

我有test.js其中包含：如何從Angular的JS文件中調用方法？

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

我想使用的測試方法在我的角度控制器：

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文件傳輸的代碼轉換成角的模型或控制器？）

來源

2016-02-16 Mark

爲該指令做出指示 –

用Angular方式創建一個[service]（https://docs.angularjs.org/guide/services）。 'Angular服務是： **懶惰實例化** - Angular只在應用程序組件依賴它時實例化一個服務。 **單身** ** - 依賴於服務的每個組件獲取對服務工廠生成的單個實例的引用。' –

您應該創建單一對象一個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 + '!'; 
    } 
}]);

// 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 + '!' 
 
    } 
 
}]);

<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>

來源

2016-02-16 18:44:22

也許使用與問題相同的模塊和控制器名稱？ – Dave

嗯實際上不會那個服務總是返回'你好，'+ $ window +'！' ？ – Dave

謝謝你的回答，胡安。但是，我試圖調用包含在Angular模塊/控制器之外的文件中的方法。我的問題中的例子被簡化了，實際上在幾個'.js'文件中有幾個方法。您是否建議我將這些文件中的代碼轉移到Angular服務中？例如，假設我想將[toastr]（https://github.com/CodeSeven/toastr）合併到我的角度應用程序中，我如何引用'toastr.min中的方法。js'在應用程序中？ – Mark

首先，創建你的模塊中的服務。（有幾個稍微不同的方式來創建服務，根據您的需要，我會讓角度純粹主義者認爲這些，如果他們想。）

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')); 
    });

請注意，由於角度手柄的注入方式，您不需要按順序運行這些手柄。您可以先定義控制器，角度仍然會爲您注入服務。

來源

2016-02-16 18:52:27 Dave

如何從Angular的JS文件中調用方法？

回答

相關問題