Difference when pass primitive types and Objects to Conntrollers

Question

I'm post example, because i'm thinking you are easier understand my question.

I have this HTML markup

<div ng-app="autoDrops" ng-controller="testController as test">
    <div ng-controller="simpleController as simple">
        <a href="" ng-click="test.addValue(value, test.testValue)">Add</a>
        <a href="" ng-click="test.addValue2(value2, test.testValue2)">Add2</a>
    </div>
    <a href="" ng-click="test.addValue(value, test.testValue)">Add</a>
    <a href="" ng-click="test.addValue2(value2, test.testValue2)">Add2</a>
    <p>
        {{test.testValue}}
    </p>  
    <p>
        {{test.testValue2}}
    </p> 
<div>

and my AngularJs controllers defined like this

var autoDrops = angular.module('autoDrops', []);
autoDrops.controller('testController', function ($scope) {
    this.testValue = 0;
    $scope.value = 1;
    this.addValue = function(value, testValue){
        //why function not work, if i remove this?
        testValue = testValue + value;
    }
    $scope.value2 = {value:"1"};
    this.testValue2 = [];

    this.addValue2 = function(value, testValue2){
    //this function work with this?
        testValue2.push(value);
    }
});
autoDrops.controller('simpleController', function ($scope) {
    $scope.value = 1;
    $scope.value2 = {value:"1"};
});

Example you can see jsfiddle

I'm sorry, I don't understand what your problem is. Please explain. — , Aug 12 '16 at 08:17
why my function this.addValue = function(value, testValue){ //why function not work, if i remove this? testValue = testValue + value; } not work without "this" or why my function this.addValue2 = function(value, testValue2){ testValue2.push(value); } work without "this"? — Jasmin Kurtic, Aug 12 '16 at 08:21
You need to read about the difference in how parameters are passed into functions http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language — MMhunter, Aug 12 '16 at 08:22

score 2 · Accepted Answer · answered Aug 12 '16 at 08:49

As said @MMHunter this is because in the 1st case you passe a simple value whereas in the secnd case, you pass an array.

Array are passed by reference and value are passed by value.

So if you want to make it works change

this.testValue = 0; to this.t = {testValue : 0};
test.addValue(value, test.testValue) to test.addValue(value, test.t)
And...

this.addValue = function(value, testValue){
  //why function not work, if i remove this?
  testValue = testValue + value;
}

To

this.addValue = function(value, t){
  //why function not work, if i remove this?
  t.testValue = t.testValue + value;
}

score 1 · Answer 2 · answered Aug 12 '16 at 08:36

1

when you are not using this ,you are not updating your scope variable, this.testValue = 0 override it , so this.testValue will still print 0

answered Aug 12 '16 at 08:36

Dan M. CISSOKHO

1,070
1
12
27

why this function update scope? this.addValue2 = function(value, testValue2){ testValue2.push(value); } – Jasmin Kurtic Aug 12 '16 at 08:44
It's because the data type are not the same your object can be use by reference but a number cannot. – Dan M. CISSOKHO Aug 12 '16 at 08:52

score 0 · Answer 3 · edited Aug 12 '16 at 09:40

0

One of the possible solution is that you use object this for updating the value.

this.testValue = testValue + value;

edited Aug 12 '16 at 09:40

Han Lim

671
7
17

answered Aug 12 '16 at 08:40

oknevermind

101
3
17

he knows it, the question is to know why this behavior – Dan M. CISSOKHO Aug 12 '16 at 08:41
When the controller constructor function is called, this is the controller. When a function defined on a $scope object is called, this is the "scope in effect when the function was called". This may (or may not!) be the $scope that the function is defined on. – oknevermind Aug 12 '16 at 08:46

Difference when pass primitive types and Objects to Conntrollers

3 Answers3