javascript - 无法使用 ng-click 更改 Angular $scope

Question

我正在尝试使用 ng-click 更改指令 Controller 的 $scope。

我有一个简单的按钮:

<button ng-click="showEnterKeyField = !showEnterKeyField">btn {{showEnterKeyField}}</button>

这段代码有效。我的意思是，我们将看到类似的内容(作为按钮 .text() ):

btn true
btn false
btn true
... etc

但是在 Controller 中我们有:

$scope.$watch('showEnterKeyField', function(val) {
    console.log(val);
}, true);

并且在控制台中根本没有日志。

接下来我要做的就是在 ng-click 中运行一些 test() fn:

<button ng-click="test()">btn {{showEnterKeyField}}</button>

令我惊讶的是，这段代码的工作原理与上面的代码完全相同:

btn true
btn false
btn true
... etc

这次我在控制台中看到了记录。

为什么第一个场景中范围没有改变？谢谢。

更新

当然，这是我的$scope.test():

$scope.test = function() {
    $scope.showEnterKeyField = !$scope.showEnterKeyField;
};

Answer 1

您需要首先在 Controller 作用域上定义属性(在本例中为 showEnterKeyField)，因此它将由 ngClick 指令继承。如果未定义，ngClick 指令将在其自己的子范围内创建该属性 - 因此您无法在 Controller (父级)范围内查看它。

只需将以下内容添加到您的 Controller :

$scope.showEnterKeyField = false; // or some other initial value

参见:JS Bin