Controller as syntax does not change controller's variable value

Question

I tried to implement for first time the controller as syntax and I face a problem where my function doesn't change the controller variable which I pass from the template. Instead it understands the parameter as a local variable. This wouldn't happen if I use $scope.

Here's my controller.

angular
    .module('app')
    .controller('baseCtrl', baseCtrl);

  function baseCtrl() {

  base = this;
  base.myVar = 'string_1';
  base.myFunction = myFunction;

  function myFunction(value) {
    value = 'string_2"';
  }
}

Here's my template.

<div ng-controller="baseCtrl as base">
  <button ng-click="base.myFunction(base.myVar)">Button</button>
</div>

After click base.myVar should change from "string_1" to "string_2" but this doesn't happen.

Does somebody know how I could figure it out ?

"This wouldn't happen if I use $scope" .. why not, what would difference be? Your function is still only changing a local variable — charlietfl
– charlietfl, Commented Sep 8, 2016 at 13:13
I think base might be a keyword or something in JavaScript; maybe that has to do with it? — Jesus is Lord
– Jesus is Lord, Commented Sep 8, 2016 at 13:17

Dinesh Shah · Accepted Answer · 2016-09-08 12:52:22Z

1

it can be done like this , do some changes in your code

angular
    .module('app',[])
    .controller('baseCtrl',function(){

   var base = this;
   base.myVar = 'string_1';
  base.myFunction = myFunction;
  
  
  function myFunction(value) {
    value = 'string_2"';
    base.myVar = value
   alert(value);
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="baseCtrl as base">
  <input type="text" ng-model="base.myVar"/>
  <button ng-click="base.myFunction(base.myVar)">Button</button>
</div>

answered Sep 8, 2016 at 12:52

Dinesh Shah

1,2331 gold badge8 silver badges13 bronze badges

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

1 Comment

korteee Over a year ago

What I need is not to declare base.myVar in the function, but the value to be indexing at base.myVar or any other variable I pass.

ninjawarrior · Accepted Answer · 2016-09-08 13:16:09Z

1

You have to assign

base.myVar = 'string"';

in myFunction and define module app like this:-

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

This is the modified code that will work.

angular
.module('app', [])
.controller('baseCtrl', baseCtrl);

function baseCtrl() {
    var base = this;
    base.myVar = 'string_1';
    base.myFunction = myFunction;
    function myFunction(value) {
        base.myVar = 'string_2"';
    }
}

edited Sep 8, 2016 at 13:16

answered Sep 8, 2016 at 13:08

ninjawarrior

3261 silver badge7 bronze badges

Comments

danday74 · Accepted Answer · 2016-09-08 12:46:21Z

0

base.myVar = "string2"

That will fix it

answered Sep 8, 2016 at 12:46

danday74

58k56 gold badges273 silver badges337 bronze badges

4 Comments

korteee Over a year ago

I need to use this function globally...so everytime I pass a parameter I need to change the relative controller variable.

danday74 Over a year ago

I see now wot ur tying to do ... Maybe it is working but angular is not updating the view ... Consider using scope.apply

korteee Over a year ago

Unfortunatelly it doesn't

danday74 Over a year ago

yes it does provide an answer. it might be the wrong answer but it sure is an answer

korteee · Accepted Answer · 2017-01-22 16:48:27Z

0

I finally figured out what was wrong. The problem is that the variable I pass is primitive. The solution is to change my variables to from primitive to objects.

So in my case the solution is:

base.myVar = {
    val: "string_1"
};

function myFunction(value) {
    value.val = "string_2";
};

edited Jan 22, 2017 at 16:48

answered Sep 8, 2016 at 13:36

korteee

2,7122 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

Controller as syntax does not change controller's variable value

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related