AngularJS - 当范围改变时用 if else 语句改变变量值

Question

当另一个范围更改其值时，我想更改一个变量。

$scope.switch = true;

var thing;
if ($scope.switch == false) {
    thing = "givesFalse";
}
else {
    thing = "givesTrue";
};
this.thingscope = thing;

所以当我将$scope.switch 的值更改为false 时，this.thingscope 应该输出givesFalse。为了改变范围值，我使用 ng-click:

<div ng-controller="myCtrl as myCtrl" ng-app="myApp">
    {{myCtrl.thingscope}}
    <br>
    <a ng-click="switch = !switch">{{switch}}</a>   
</div>

但即使我可以看到范围确实更新了，变量thing 似乎也没有同时更新。你可以看到正在工作的 plunkr here。提前致谢！

Answer 1

你有两个选择：

0 - 自动：使用手表

$scope.$watch('switch', function () {
  $scope.thing = $scope.switch ? "givesTrue" : "givesFalse";
});

1 - 手动：使用更改两个值的自定义函数。

ng-click="switch = !switch"

改成：

ng-click="customFunction()"

并在控制器中定义：

$scope.customFunction = function () {
  $scope.switch = !$scope.switch;
  $scope.thing = $scope.switch ? "givesTrue" : "givesFalse";
}

Answer 2

主要的一点是当你的控制器被实例化时你的控制器的代码只会被执行一次。 如果您希望它响应更改，您需要使用$watch。

$scope.$watch('switch', function(newSwitchValue, oldSwitchValue) {
  if ($scope.switch == false) {
    $scope.thing = "givesFalse";
  }
  else {
    $scope.thing = "givesTrue";
  }
});

在架构和性能很重要的实际应用中，我建议您直接从 ng-click 调用函数。

ng-click="onClickSwitch()"

然后在$scope中定义函数onClickSwitch()。

$scope.onClickSwitch = function() {
    $scope.switch = !$scope.switch;
    [code as above]
}