Angular modify scope attribute in a scope function

Question

I'm using angular since 1 little week now and i have encounter a strange behavior (and i don't know why i didn't see that earlier because it's look like a pretty basic error).

I have a controller let's say HomeController which define two scope function : foo() and bar() and an object "var myVar = 5", I would like to change the value of myVar in foo() and write it's content in bar().

The problem is, it's look like that foo() does not modify myVar. I'm not still very aware about scopes in angular, and how they interact, but i think that my $scope in foo() is a different scope, a copy of the actual controller scope. so modifying it will not modify the controller one.

But how can i achieve this ?

Edit : Add all used code

Edit 2 : Add plunker : http://plnkr.co/edit/DGzw0UxjBeND3hQWK3o3

Here is my Index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>

    <!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">


    <!-- JS -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>


    <!-- Loading angular App -->
    <script src="app.js"></script>

    <!-- Loading angular controllers -->
    <script src="homeController.js"></script>

</head>


<body ng-app="TemplateApp">
    <div ng-view></div>
</body>
</html>

app.js :

var app = angular.module('TemplateApp', ['ngRoute']);

app.config(function($routeProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'homeController'
        })

});

home.html :

<div class="row">
    <div class="col s6">
        <a class="btn" href="#" ng-click="foo()">call foo</a>
    </div>
    <div class="col s6">
        <a class="btn" href="#" ng-click="bar()">call bar</a>
    </div>
</div>

And finally homeController.js :

angular.module('TemplateApp').controller('homeController', [ '$scope', function($scope) {

    $scope.myVar = 5;

    $scope.foo = function() {
        $scope.myVar = 10;

        console.log($scope.myVar); // display 10
    };

    $scope.bar = function() {
        console.log($scope.myVar); // display 5 Should be 10
    };
}])

Thanks

as far as i can see - in current code, if you trigger "foo" before "bar" it should do exactly as you plan... i guess you problem is much more simpler than and have nothing to do with deep understanding of scopes — happyZZR1400
– happyZZR1400, Commented Jun 12, 2017 at 10:03
You need to share code of your view to understand what exactly you do. — Ankit Vadi
– Ankit Vadi, Commented Jun 12, 2017 at 10:29

geofrey · Accepted Answer · 2017-06-12 18:22:19Z

1

From your plunker:

<div class="row">
    <div class="col s6">
        <a class="btn" href="#" ng-click="foo()">call foo</a>
    </div>
    <div class="col s6">
        <a class="btn" href="#" ng-click="bar()">call bar</a>
    </div>
</div>

Your clickable links contains href="#" that reloads page state and resets your scope variables, which is why bar() always sees value=5. Removing them should fix your problem.

answered Jun 12, 2017 at 18:22

geofrey

4663 silver badges13 bronze badges

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

1 Comment

Nicolas Pretot Over a year ago

Ok, as i said, it was a stupid and pretty basic error :). It's work, thank you !

Suneet Bansal · Accepted Answer · 2017-06-12 10:06:38Z

0

$scope.myVar will only be update when $scope.foo() method is called first.

Check below code, it should display 10:

angular.module('TemplateApp').controller('homeController', [ '$scope', function($scope) {

   $scope.myVar = 5;

    $scope.foo = function() {
        $scope.myVar = 10;

        console.log($scope.myVar); // display 10
    };

    $scope.bar = function() {
        console.log($scope.myVar); // display 5 , I would like 10 there
    };


    $scope.foo();
    $scope.bar();
}])

answered Jun 12, 2017 at 10:06

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

Comments

Nicolas Pretot · Accepted Answer · 2017-06-12 10:16:14Z

0

Tanks for these quick answer.

In fact i'm not calling these function from my controller.

I have a view file where i define two button the first

call foo call bar

Of course i click on the "call foo" btn first and then on the "call bar"

answered Jun 12, 2017 at 10:16

Nicolas Pretot

1922 silver badges13 bronze badges

Comments

happyZZR1400 · Accepted Answer · 2017-06-12 10:22:20Z

0

i placed two buttons which trigger each one its function:

<button ng-click="foo()">foo</button>
<button ng-click="bar()">bar</button>

look at this plunker - it shows 10 when "bar" clicked after "foo"

answered Jun 12, 2017 at 10:22

happyZZR1400

2,4134 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

Angular modify scope attribute in a scope function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related