javascript - ngModel 不更新深层次

Question

当我有一个以上级别的 ngModel 并且我在范围内以编程方式修改值时，该值不会在 UI 中更新。如果我在同一处特性上放置一个 $watch，它就会起作用。如何修复 ngModel

html:

<form ng-controller="testController">
    <input type="text" ng-model="coco.c.c.c">
    <input type="test" ng-model="super.s.s.s">
    <input type="test" ng-model="super2">
</form>

js:

var app = angular.module('app', []);

app.controller('testController', function ($scope) {
    $scope.super = {
        s: {
            s: {

            }
        }
    };

    $scope.coco = {
        c: {
            c: {

            }
        }
    };

    $scope.$watch('coco.c.c.c', function (value) {
        $scope.super = +value * 2;
        console.log(value);

    });
    $scope.$watch('super.s.s.s', function (value) {
        $scope.super2 = +value * 2;
    });
});
app.controller('testController2', function ($scope) {
    $scope.$watch('coco', function (value) {
        $scope.super = +value * 2;
        console.log(value);
    });
    $scope.$watch('super', function (value) {
        $scope.super2 = +value * 2;
    });
});

angular.bootstrap(文档, [app.name]);

http://jsfiddle.net/M5wzt/2/

Answer 1

我认为问题出在这一行

  $scope.super = +value * 2;

这里您正在更改 $scope.super 的内容。所以你不能再使用 $scope.super.s.s.s

不过，我不明白你想要完成什么。也许是这样的？

<form ng-controller="testController">
   <input type="text" ng-model="coco.c.c.c" />
   <input type="text" ng-model="super.s.s.s" />
   <input type="text" ng-model="super2" />
</form>

app.controller('testController', function ($scope) {
    $scope.super = {s:{ s:{ }}}

    $scope.coco = {
        c: {
            c: {

            }
        }
    };

    $scope.$watch('coco.c.c.c', function (value) {
        $scope.super.s.s.s = +value * 2;
        console.log("coco", value);

    });
    $scope.$watch('super.s.s.s', function (value) {
       $scope.super2 = +value * 2;
        console.log("super", value);
    });
});