Lodash in Angular JS - getting TypeError: Object function 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>

Nick White · Accepted Answer · 2014-07-08 19:14:12Z

3

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.

answered Jul 8, 2014 at 19:14

Nick White

1,6124 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Louis · Accepted Answer · 2014-03-30 12:54:21Z

1

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.

edited Mar 30, 2014 at 12:54

answered Mar 30, 2014 at 12:48

Louis

152k28 gold badges288 silver badges332 bronze badges

5 Comments

Alex Man Over a year ago

but when i called it like window.calculateResult($scope.firstNumber, $scope.secondNumber, $scope.selectedOperator ); i'm getting TypeError: Object [object global] has no method 'calculateResult'

Alex Man Over a year ago

can't we call it like by some other ways _.calculateResult($scope.firstNumber, $scope.secondNumber, $scope.selectedOperator );

Louis Over a year ago

Did you add the statement window.calculateResult = calculateResult at the end of your anonymous function in common.js? If you did and you are still getting an error, then the problem could be the order in which your JavaScript is loaded.

Louis Over a year ago

Regarding your 2nd comment, you could probably add a method to lodash named calculateResult but my answer to this idea is the same as what I've put at the end of my answer: you should look into a proper modularlization system.

Louis Over a year ago

The code you show in your comment is a bit hard to read but looks correct to me. If you are still getting errors, I suspect the problem is elsewhere (like for instance the order in which your JavaScript gets loaded or executed).

Collectives™ on Stack Overflow

Lodash in Angular JS - getting TypeError: Object function lodash(value)

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related