javascript - Why does my $watch only ever fire once? - Stack Overflow

admin管理员组

文章数量:1279148

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.

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:

<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:

<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 plex, reusable widget that in this instance would work on $scope.cert as its recipient.

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.

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:

<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:

<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 plex, reusable widget that in this instance would work on $scope.cert as its recipient.

• javascript
• angularjs
• angularjs-ng-include

Share Improve this question Follow asked Mar 17, 2015 at 22:09 GiszmoGiszmo 2,12722 gold badges2222 silver badges5151 bronze badges 3

• Just for giggles, what happens when you inject the rootscope and call $watch on that? – lintmouse Commented Mar 17, 2015 at 22:13
• @dustmouse no change. Exactly the same bug/behavior. – Giszmo Commented Mar 17, 2015 at 22:19
• As said by floribon in his answer, learn about the so-called "dot rule". – Blackhole Commented Mar 17, 2015 at 22:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

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-include creates new scope.

Try this

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

Plunker example

本文标签： javascriptWhy does my watch only ever fire onceStack Overflow