Modify Inline Angular Variable From Controller

Question

so I have this in my index.html:

 <!-- Nav -->
 <nav ng-init="cartempty=true" id="nav">
   <span ng-if="!cartempty">
     <i class="fa fa-shopping-cart"></i>: {{total}} 
   </span>
   <span ng-if="cartempty">
     <i class="fa fa-shopping-cart"></i>: Cart Empty 
     <i class="fa fa-frown-o"></i>
   </span>
 </nav>

When somebody adds to the cart, I want cartempty to go false.

I was trying to do this in the controller, off an ng-click that launches the plusOne function, but it wasn't working...

$scope.plusOne= function(theBread, theNumber) {
    cartempty = false;    
    function searchandreplace(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].text === nameKey) {
            myArray[i].quantity = theNumber;
        }
    }
}
searchandreplace(theBread, $scope.BreadsToOrder)

}

Is it a scope issue? How do I do this properly?

DynamicDispatch · Accepted Answer · 2015-08-22 20:01:48Z

1

Like you said, it looks like a scope issue. Try to remove the ng-init="cartempty=true" from your <nav> in HTML and instead use $scope.cartempty = true; in your controller. Even if that doesn't work, it's good practice to initialize variables in the controller rather than using ngInit. (Also, like @csmithmaui said, make sure you use $scope.cartempty = false; rather than cartempty = false; in your plusOne function.)

If that works, it's probably because some directive (in between your controller and <nav>) is creating a new child scope. So then <nav ng-init="cartempty=true"> puts cartempty on the child scope, so your spans never see cartempty on the parent scope set by the controller. For more info, see: https://github.com/angular/angular.js/wiki/Understanding-Scopes.

By the way, it's also good practice to use the "controller as" syntax to avoid scope issues like this.

Hope that helps.

answered Aug 22, 2015 at 20:01

DynamicDispatch

4214 silver badges12 bronze badges

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

3 Comments

Summer Developer Over a year ago

In the ng-if can I say ng-if="cartempty" or should it be ng-if="$scope.cartempty" or something? I'm trying to see if the problem is here too, although I will read up on those links you posted to try and get the answer.

DynamicDispatch Over a year ago

Using ng-if="cartempty" is fine. The only time you need to use $scope.cartempty is in the controller.

DynamicDispatch Over a year ago

One last thing you can try is ng-init="$parent.cartempty=true" (i.e., add $parent. to the front of cartempty). I didn't mention it before because it's considered bad practice to use $parent, but if it works, then use it. Other than that, I'm all out of ideas. =)

clintsmith · Accepted Answer · 2015-08-22 00:09:24Z

1

I think you just need to use $scope.cartempty=false; not just cartempty=false;

answered Aug 22, 2015 at 0:09

clintsmith

6851 gold badge7 silver badges17 bronze badges

4 Comments

clintsmith Over a year ago

are you sure your function plusOne is getting called when you click on whatever element has the ng-click? I do stuff like this all the time and it seems like it should work if that function is getting called.

Summer Developer Over a year ago

yes, I tested with an alert and it is definitely getting called.

clintsmith Over a year ago

check this out...it's working for me. embed.plnkr.co/ZT16bWqsAggLiRCgNOki/preview also, check your console for errors and make sure you use $scope if you are working in the controller

Summer Developer Over a year ago

no console errors, still not working in my implementation... I will keep trying.

Collectives™ on Stack Overflow

Modify Inline Angular Variable From Controller

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related