Angular JS中的Lodash - 獲取TypeError：對象函數lodash（value）

Question

我已經創建了一個角度應用程序，用於執行簡單的計算器。 該應用程序工作正常（ 演示 ），但在計算方法的控制器中我已經在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>

Answer 1

嘗試ngLodash模塊，像使用任何Angular模塊/插件一樣啟動它。 它可以在不觸及窗口范圍的情況下完成工作，並保持正常的Angular加載方式。

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

它也在涼亭上

Bower安裝nglodash

使用腳本標記將其添加到html文件中並將其加載到模塊中。

Answer 2

它為什么要起作用？

使用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函數污染全局范圍。