1

I have a specific problem which I can't seem to crack.

In html I have following code:

<select ng-model="$parent.proizvod"  ng-options="i.id_proizvod as i.proizvod for i in proizvodiServer">
   <option>Select</option>
 </select>

And in my controllers:

  $rootScope.proizvod = '1';

So when the page first loads, the first option is selected. If I change the $rootScope.proizvod = '1'; to $rootScope.proizvod = '3'; It will load the third option.

Now, when you select some other value, it will store it in $rootScope.proizvod, but later, in some function, I want to reset that $rootScope.proizvod back to '1' and it doesn't seem to be working.

What am I missing here?

P.S. without $parent.proizvod, my select doesn't even change the $rootScope.proizvod value.

EDIT: Here's the other fucntion:

$rootScope.upisPodataka = function() {
      setTimeout(function () {
      $rootScope.proizvod = '1';
      $scope.$apply();
       }, 2000);
      $state.go('app.podesenost_grilla', {}, {
        reload: true
      });

upisPodataka function is called on a click of a button.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
svemiracBago
  • 57
  • 1
  • 6
  • show your "other function" – Ousmane D. Mar 11 '17 at 14:21
  • It's basically the same as it is in the controller. I've edited the question now. – svemiracBago Mar 11 '17 at 14:23
  • Why are you using rootscope for keepin track of a select option? All scopes will inherit that value..Thats bad design. Attach the value to the scope of the controller instead. Also, use $setTimeout instead of using setTimeout and manually triggering the digest loop. The $setTimeout will take care of that for you as its wrapped in an $apply. – Marcus Höglund Mar 11 '17 at 14:45
  • I'm using $rootScope because I use that variable in 2 controllers. – svemiracBago Mar 11 '17 at 14:46
  • @MarcusH The Angular service that wraps window.setTimeout is $timeout, see [AngularJS $timeout API Reference](https://docs.angularjs.org/api/ng/service/$timeout). – georgeawg Mar 11 '17 at 17:16

1 Answers1

1

Using ng-model='$parent.proizvod' is not guaranteed to update $rootScope in all circumstances.

New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes, so the problem often shows up when these directives are involved.

— AngularJS Wiki - Understanding Scopes

If the ng-model sets the value in a child scope. The child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. Read the Wiki.

So the question becomes should it be $parent.$parent.proizvod? Or maybe $parent.$parent.$parent.proizvod? Do it by trial and error?

A more robust approach is to use the ng-change directive to update the variable.

<select ng-model="vm.proizvod" ng-change="vm.update()"
        ng-options="i.id_proizvod as i.proizvod for i in proizvodiServer">
   <option>Select</option>
</select>

vm.update = function () {
    $rootScope.proizvod = vm.proizvod;
    console.log($rootScope.proizvod);
});

Instead of using $rootScope, consider using a custom service to store the variables.

$rootScope exists, but it can be used for evil

Scopes in AngularJS form a hierarchy, prototypically inheriting from a root scope at the top of the tree. Usually this can be ignored, since most views have a controller, and therefore a scope, of their own.

Occasionally there are pieces of data that you want to make global to the whole app. For these, you can inject $rootScope and set values on it like any other scope. Since the scopes inherit from the root scope, these values will be available to the expressions attached to directives like ng-show just like values on your local $scope.

Of course, global state sucks and you should use $rootScope sparingly, like you would (hopefully) use with global variables in any language. In particular, don't use it for code, only data. If you're tempted to put a function on $rootScope, it's almost always better to put it in a service that can be injected where it's needed, and more easily tested.

Conversely, don't create a service whose only purpose in life is to store and return bits of data.

— AngularJS FAQ

Use $timeout instead of window.setTimeout

$rootScope.upisPodataka = function() {
      //setTimeout(function () {
      $timeout(function () {
         $rootScope.proizvod = '1';
         //$scope.$apply();
      }, 2000);
      $state.go('app.podesenost_grilla', {}, {
        reload: true
      });
};

The $timeout service wraps windows.setTimeout and integrates it with the AngularJS framework and its digest cycle. Then $apply() is not needed.

In addition, $timeout.flush() can be used when testing.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • Seems to work flawlessy! One thing though, I knew about child scopes, so that was the reason I put $parent on it, but it seems that I have not yet fully grasped angular scopes! Thanks! – svemiracBago Mar 11 '17 at 18:35