Question

我遇到的问题$watch真的让我的大脑难以置信。我几乎可以肯定它在某种程度上是一个范围问题。这是基础知识。我想在一个复选框周围的跨度上的工具提示及其标签，以便工具提示在将鼠标悬停在复选框或标签上时激活。这样的事情。（注意：我添加了{{values.isChecked}}只是为了观察两个不同范围内的值）

HTML

 {{values.isChecked}}
<span tooltip-placement="right" tooltip="This is my tooltip">
    <input type="checkbox" id="myCheckbox" ng-model="values.isChecked">
    <label for="myCheckbox"> My Checkbox</label> {{values.isChecked}}
</span>

来自角度控制器的

$scope.values.isChecked = true;
$scope.watch("values.isChecked",function(newValue,oldValue){
    alert("Made it to the watch");
}

最奇怪的行为是我的手表捕获值从true转换为false。但是没有抓住从虚假到真实的转变。我可以多次点击它，它将使手表从真实变为假，但不是假到真。如果它捕获true为false，然后再次将true捕获为false，那么，它必须从false更改为true才能再次触发监视。我知道价值实际上正在发生变化，我通过{{values.isChecked}}将这两个地方添加到页面中，两者都显示值按预期变化，当我检查框时它不会触发我的手表。只有当我取消检查它时。

我的所有代码都在隔离网络的不同盒子上，所以我实际上无法复制和粘贴任何代码，因此只想输入相关内容。另外，如果我只拿出有工具提示的Span，它就可以了。我知道bootstrap UI的工具提示确实创建了一个新的范围。所以怀疑，但不知道为什么它适用于一个过渡，而不是另一个过渡。

我甚至在工具提示中捕捉范围，并在那里添加我的手表......

myChildScope = angular.element('#myCheckBox').scope()
myChildScope.$watch("values.isChecked",function(newValue,oldValue){
...

行为不正确，完全相同。如果我尝试在复选框元素中添加ng-click或ng-change，也会表现完全相同（不好）的方式。

Answer 1

要尝试两件事，我不确定您的代码是如何设置的，但是如果watch的问题在您认为应该没有捕获的情况下，通常其中一个会起作用。

$scope.watch("values.isChecked",function(newValue,oldValue){
                                              alert("Made it to the watch");
                                          }, true);

true告诉它使用angular.equals比较对象的相等性，而不是比较引用相等性。因为它是一个布尔基元...可能更多你想要使用的东西。

另一个选项，在您的情况下可能有用也可能没用，

$scope.watchCollection("values",function(newValue,oldValue){
                                              alert("Made it to the watch");
                                          });

查看values对象中是否有任何内容发生变化。

此外，您可以将isChecked更改为对象

$scope.isChecked = { checked: false }

和$watch对象而不是布尔本身。

Angularjs Bootstrap UI工具提示范围可防止手表触发

1 个答案: