Angular JS中的Lodash - 获取TypeError：对象函数lodash（value）

Question

i've created an application in angular for performing a simple calculator. The application works fine ( demo ) but here in the controller within the calculate method i've wrote some arithmetic calculation in javascript. So to make my angular code clean i created another file named common.js where i placed that arithmetic calculations. I'm using lodash.js. but when i tried to call the method _.calculateResult($scope.firstNumber, $scope.secondNumber, $scope.selectedOperator ); i'm getting the following exception.

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)

can anyone please tell me some solution for this.

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

Try ngLodash module, initiate it like you would with any Angular module / plugin. It works complelty without touching window scope and stays with the normal Angular way of loading.

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

It's on bower also

Bower install nglodash

Add it into to the html file with a script tag and load it in to the module.

Answer 2

Why should it work?

When you use lodash, the _ symbol is usually bound to lodash so you are calling a method on the lodash library with this code:

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

And indeed the error message confirms that _ is lodash.

Moreover, your common.js file never exports calculateResult to some place accessible to code which is outside your anonymous function. You could export it on window if you add this statement at the end of your anonymous function window.calculateResult = calculateResult and then you'd call it with:

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

This should take care of your immediate problem. ( window is actually optional in window.calculateResult(...) because without it the JavaScript interpreter will still seek calculateResult from the global scope but I prefer to make it explicit.)

I would strongly suggest looking into a proper modularization system to avoid polluting the global scope with functions like calculateResult .