代码在 Javascript 中运行的时间/频率

Question

I'm just trying different things to learn how javascript works, and I'm wondering why the following doesn't work.

I've got a function that toggles independent_color between "blue" and "red" on button click:

$scope.independent_color = "blue";

$scope.toggle_independent_color = function() {
    if ($scope.independent_color == "blue") {
        $scope.independent_color = "red"
    }
    else {
        $scope.independent_color = "blue"
    }
}

Then, I have some conditionals that set dependent_color based on the value of independent_color :

if ($scope.independent_color == "blue") {
    $scope.dependent_color = "blue"
}

else {
    $scope.dependent_color = "red"
}

However, when I toggle independent_color , the value of dependent_color does not change.

Here's a FIDDLE: https://jsfiddle.net/exr3tqm0/5/

My question is not how to get this to work. Rather, I'd like to know why it doesn't work. When/how often does the code run?

Answer 1

It does not change because this code:

if ($scope.independent_color == "blue") {
    $scope.dependent_color = "blue"
}

else {
    $scope.dependent_color = "red"
}

lies directly in controller function, so it's executed only once, when controller is created (when you enter the view). Simply change your dependantColor in toggle_independent_color . You can also handle this dependency using angular's $scope.watch but it's not needed in your case.

Answer 2

The code runs once. The function for toggle_independent_color runs as many times as you click (your fiddle shows it attached via ng-click). All the other code runs once when your controller is instantiated. If you instantiate your controller multiple times (such as in having multiple of the same views) then it will run that many times, but each instantiated controller will have its own child scope.

On a side note, to get it to work, you can try putting that dependent_color functionality into another function.

var app = angular.module("myApp", []);

app.controller("myController", ["$scope", function($scope) {

$scope.independent_color = "blue";

$scope.toggle_independent_color = function() {
    if ($scope.independent_color == "blue") {
        $scope.independent_color = "red"
    }
    else {
        $scope.independent_color = "blue"
    }
    checkDependent(); // check the dependent color when the button is clicked
}

// this check needs to be run each time the color is changed
function checkDependent(){
  if ($scope.independent_color == "blue") {
      $scope.dependent_color = "blue"
  }
  else {
      $scope.dependent_color = "red"
  }
}

}]);