Angular JS 中的 Lodash - 获取 TypeError: Object function lodash(value)答案

【问题标题】：Lodash in Angular JS - getting TypeError: Object function lodash(value)Angular JS 中的 Lodash - 获取 TypeError: Object function lodash(value)
【发布时间】：2014-05-09 18:06:17
【问题描述】：

我已经创建了一个 Angular 应用程序来执行一个简单的计算器。该应用程序工作正常（demo），但在控制器中的计算方法中，我用javascript编写了一些算术计算。所以为了让我的角度代码干净，我创建了另一个名为 common.js 的文件，我在其中放置了算术计算。我正在使用 lodash.js。但是当我尝试调用 _.calculateResult($scope.firstNumber, $scope.secondNumber, $scope.selectedOperator ); 方法时，我得到了以下异常。

TypeError: Object function lodash(value) {
      // don't wrap if already wrapped, even if wrapped by a different `lodash` constructor
      return (value && typeof value == 'object' && !isArray(value) && hasOwnProperty.call(value, '__wrapped__'))
       ? ...<omitted>... } has no method 'calculateResult'
    at Object.$scope.calculate (http://localhost:8080/RestSample/app/scripts/controllers.js:18:19)

谁能告诉我一些解决方案。

common.js

(function() {

var calculateResult = function(no1, no2, opp) {
var A = parseInt(no1);
var B = parseInt(no2);
var C = 0;

switch (opp) {
      case '+':
      C = A + B;
      break;
      case '-':
      C = A - B;
      break;
      case '*':
      C = A * B;
      break;
      case '/':
      C = A / B;
      break;                
   }

   return C;
}

})();

controllers.js

    var app = angular.module('app', []);

    app.controller("appController", function($scope){
        $scope.operators = ['+', '-', '*', '/'];
        $scope.selectedOperator = $scope.operators[0];

        $scope.calculate = function() {
$scope.result = _.calculateResult($scope.firstNumber, $scope.secondNumber, $scope.selectedOperator );

        };
    });

index.html

    <div ng-app="app">
        <div ng-controller="appController">

     <div class="offset4 span6 well">
     <label>Enter a value :</label>
     <input ng-model="firstNumber" type="text"> <br/><br>


     <label>Another Value:</label>
     <input ng-model="secondNumber" type="text"> <br/><br>

     <label>Operator:</label>
     <select ng-model="selectedOperator" 
     ng-options="operator for operator in operators"></select> 
     <br><br>

     <button ng-click="calculate()">Calculate</button> <br><br>

     Result: {{result}}
     </div>
     </div>
    </div>

【问题讨论】：

标签： javascript angularjs lodash

【解决方案1】：

为什么它应该起作用？

当您使用 lodash 时，_ 符号通常绑定到 lodash，因此您使用以下代码调用 lodash 库上的方法：

_.calculateResult($scope.firstNumber, $scope.secondNumber, $scope.selectedOperator );

确实，错误消息确认 _ 是 lodash。

此外，您的common.js 文件永远不会将calculateResult 导出到您的匿名函数之外的代码可以访问的某个地方。如果您在匿名函数 window.calculateResult = calculateResult 的末尾添加此语句，则可以将其导出到 window，然后您可以使用以下命令调用它：

window.calculateResult($scope.firstNumber, $scope.secondNumber, $scope.selectedOperator );

这应该可以解决您眼前的问题。（window 在window.calculateResult(...) 中实际上是可选的，因为没有它，JavaScript 解释器仍然会在全局范围内寻找calculateResult，但我更愿意让它显式。）

我强烈建议研究适当的模块化系统，以避免使用 calculateResult 之类的函数污染全局范围。

【讨论】：

但是当我像 window.calculateResult($scope.firstNumber, $scope.secondNumber, $scope.selectedOperator ); 这样称呼它时，我得到了 TypeError: Object [object global] has no method 'calculateResult'
我们不能用其他方式称呼它吗_.calculateResult($scope.firstNumber, $scope.secondNumber, $scope.selectedOperator );
您是否在common.js 的匿名函数末尾添加了语句window.calculateResult = calculateResult？如果您 did 仍然出现错误，那么问题可能出在 JavaScript 的加载顺序上。
关于您的第二条评论，您可能可以向 lodash 添加一个名为 calculateResult 的方法，但我对这个想法的回答与我在回答末尾的回答相同：您应该看看进入适当的模块化系统。
您在评论中显示的代码有点难以阅读，但对我来说看起来是正确的。如果您仍然遇到错误，我怀疑问题出在其他地方（例如加载或执行 JavaScript 的顺序）。

【解决方案2】：

试试 ngLodash 模块，像使用任何 Angular 模块/插件一样启动它。它可以在不触及窗口范围的情况下完全工作，并保持正常的 Angular 加载方式。

https://github.com/rockabox/ng-lodash

它也在凉亭上

Bower 安装 nglodash

将其添加到带有脚本标签的html文件中并加载到模块中。

【讨论】：