Angular $watch 不更新 UI

Question

我有一个 $watch，我正在更新我的模型。但是我的模型无法更新 UI 中的绑定控件。

这是更新模型的屏幕截图。

我的用户界面有这个

<form method="post" action="" role="form" class="form-horizontal form-group-sm">

    <table ng-controller="myController" class="table table-responsive table-striped">
        <tr>
            <td>
                <label for="moduleid" class="col-md-2">Module ID : </label>
                <div class="form-group  col-md-3">

                    <input type="text" id="moduleid" name="moduleid" ng-model="hdr.moduleid" value="" class="form-control">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <label for="modulename" class="col-md-2">Module Name : </label>
                <div class="form-group col-md-4">
                    <input type="text" id="modulename" name="modulename" ng-model="hdr.modulename" value="" class="form-control">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <label for="status" class="col-md-2">Status : </label>
                <div class="form-group col-md-4">

                    @Html.DropDownList("status", (List<SelectListItem>)ViewBag.StatusList, new { @class = "form-control ComboM required", @ng_model = "hdr.status", @style = "width: 240px" })
                    @Html.AntiForgeryToken()
                </div>
            </td>
        </tr>
    </table>
</form>

为什么无法更新我的 UI。

EDIT ：也尝试了以下方法。还是没有运气。

   $scope.$watch("mySelectedItems[0]", function (newVal, oldVal) {
        var val;
        if (newVal != oldVal) {
            if (newVal == undefined && oldVal)
                $scope.hdr = oldVal;
            else $scope.hdr = newVal;
        }
        //    alert($scope.hdr.modulename);
    });

EDIT 2：在JS Fiddle 中工作，但在我的项目中没有。请看原文SO Question

Answer 1

您的$scope.hdr 似乎是一个对象。对象在 JS 中是通过引用绑定的（就像数组一样）。您设置了您的 $scope.hdr = y 并导致破坏此引用。您的绑定不会因此而更新。根据您的对象内容，您可以尝试angular.extend 或angular.merge：

angular.extend($scope.hdr, y);

文档：

https://docs.angularjs.org/api/ng/function/angular.extend