Question

我只是尝试不同的东西来学习javascript的工作原理，我想知道为什么以下内容不起作用。

我有一个功能可以在点击按钮时在independent_color和"blue"之间切换"red"：

$scope.independent_color = "blue";

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

然后，我有一些条件根据dependent_color的值设置independent_color：

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

else {
    $scope.dependent_color = "red"
}

但是，当我切换independent_color时，dependent_color的值不会改变。

这是一个FIDDLE：https://jsfiddle.net/exr3tqm0/5/

我的问题不是如何让它发挥作用。相反，我想知道为什么它不起作用。代码何时/多久运行一次？

Answer 1

它没有改变，因为这段代码：

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

else {
    $scope.dependent_color = "red"
}

直接位于控制器功能中，因此在创建控制器时（进入视图时）它只执行一次。只需更改dependantColor中的toggle_independent_color即可。您也可以使用angular $scope.watch处理此依赖关系，但在您的情况下不需要它。

Answer 2

代码运行一次。 toggle_independent_color的功能会在您单击时运行多次（您的小提示显示通过ng-click附加）。实例化控制器时，所有其他代码都会运行一次。如果多次实例化控制器（例如，在多个相同的视图中），那么它将运行很多次，但每个实例化的控制器都有自己的子范围。

另一方面，为了让它发挥作用，您可以尝试将dependent_color功能放入另一个功能。

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"
  }
}

}]);

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

2 个答案: