为什么我的$ watch只会发射一次？

I'm factoring out some widget and the $watch expression works perfectly having all in one file but now I moved the relevant controller part into a new controller and the markup into a new html and the $watch fires exactly once after initialization but not when editing typing in the associated input.

我正在考虑一些小部件并且$ 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 of wrapper:

包装器的HTML:

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

HTML of partials/getRecipientWidget.html:

partials / getRecipientWidget.html的HTML:

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

I suspect there is some scope voodoo going on? I left the ng-init in to make clear what I want to achieve: build an obviously more complex, reusable widget that in this instance would work on $scope.cert as its recipient.

我怀疑有一些范围伏都教吗?我离开了ng-init以明确我想要实现的目标:构建一个明显更复杂,可重用的小部件,在这个实例中可以在$ scope.cert上作为其接收者。

2 个解决方案

#1

That is probably because ng-include will create a new inherited scope on the included HTML, hence $scope.addressInput in your controller is not the same reference as $scope.addressInput in getRecipientWidget.html

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

Well it's not easy to explain, but you should either put ng-controller within the HTML of getRecipientWidget.html (and not on the div above that includes it), OR you can use an object such as something.addressInput instead of the raw addressInput which avoids references issues on raw types (number/string).

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

#2

ng-include creates new scope.

ng-include创建新范围。

Try this

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

Plunker example

#1