为什么我的 $watch 只触发一次？答案

【问题标题】：Why does my $watch only ever fire once?为什么我的 $watch 只触发一次？
【发布时间】：2015-05-20 13:35:42
【问题描述】：

我正在分解一些小部件，$watch 表达式在一个文件中完美运行，但现在我将相关控制器部分移动到一个新控制器中，并将标记移动到一个新 html 中，$watch 只触发一次在初始化之后，但不是在编辑相关输入时键入。

JS：

app.controller('getRecipientWidgetController', [ '$scope', function($scope) {
    console.log("controller initializing")
    var testReceivingAddress = function(input) {
        console.log("change detected")
    }
    $scope.$watch("addressInput", testReceivingAddress)
} ])

包装器的HTML：

<ng-include
    src="'partials/getRecipientWidget.html'"
    ng-controller="getRecipientWidgetController"
    ng-init="recipient=cert"> <!-- ng-init doesn't influence the bug. -->
</ng-include>

partials/getRecipientWidget.html的HTML：

<md-text-float ng-model="addressInput"></md-text-float>

我怀疑有一些范围的巫术正在发生？我留下了ng-init，以明确我想要实现的目标：构建一个明显更复杂、可重用的小部件，在这种情况下，它可以在$scope.cert 上作为recipient 工作。

【问题讨论】：

开玩笑，当你注入 rootscope 并在上面调用 $watch 会发生什么？
@dustmouse 没有变化。完全相同的错误/行为。
正如floribon在他的回答中所说，了解所谓的“点规则”。

标签： javascript angularjs angularjs-ng-include

【解决方案1】：

这可能是因为ng-include 将在包含的 HTML 上创建一个新的继承范围，因此控制器中的 $scope.addressInput 与 getRecipientWidget.html 中的 $scope.addressInput 引用不同

嗯，这并不容易解释，但是您应该将 ng-controller 放在 getRecipientWidget.html 的 HTML 中（而不是放在上面包含它的 div 上），或者您可以使用诸如 something.addressInput 之类的对象而不是原始addressInput，它避免了原始类型（数字/字符串）的引用问题。

【讨论】：

是的！谢谢你！ something 开始在这里工作。 :) 不确定要选择哪种解决方案，但有选择比我的错误更好:)
选择第二个。使用点符号在 AngularJS 中被视为最佳实践，并且始终如一地这样做意味着您不会让这个错误再次困扰您（或您的同事会更改 HTML）
我刚刚测试了第一个并了解到（您可能会详细说明/将其添加到您的回复中）两个控制器最终都在同一范围内运行。将与something 和两个范围（？）一起使用。
使用点确实是安全的，但我建议两者都做：听起来getRecipientWidgetController 必须是getRecipientWidget.html 的控制器，所以没有理由将它分开。事实上，最干净的第三种解决方案是使用指令而不是 ngInclude+controller，这正是他们这样做的好时机：)

【解决方案2】：

ng-include 创建新范围。

试试这个

<md-text-float ng-model="$parent.addressInput"></md-text-float>

Plunker example

【讨论】：

谢谢，但我猜 floribon 在解释发生了什么方面做得很好。使用$parent 可能是第三种选择。