Javascript 观察复杂结构性质的变化

这是我的故事。我有一个视图显示每个用户每天的班次

我的模型相当复杂，看起来更不像这样：

planner = {
  //...
  entries: {
    '2016-03-01': {
      'user1': {
        date: '2016-03-01',
        id: 1,
        user: Object {}
        shift: Object {}
      },
      'user2': {
        //...
      }
    },
    '2016-03-02': {
      //...  
    }
  }
}

在controller中，我创建了一系列日期、用户数组，并在我的结构上迭代，为每个用户/天创建一个单元格

对于我的每个单元格，我都有一个带有扩展名的指令，单击该指令时，将调用控制器setShift（单元格，shift），在该指令中，我使用新的shift和do PUT更新单元格

但问题是，尽管我在这个单元格上设置了一个新的移位，DOM并没有改变

我尝试了

$watch（'planner'，fn，true）

，我发现planner对象为单元格设置了一个新的移位，但在DOM中，没有任何更改

我必须调用loadAll，将新获取的规划器设置为作用域以查看DOM更新

如果你有更好的主意，我在等你

干杯

编辑：控制器来了

'use strict';

angular.module('myapp')
.controller('PlannerController', function ($scope, $state, Planner, ShiftEntry) {

    $scope.mom = moment();

    $scope.dateRange = [];

    $scope.planner = undefined;
    $scope.loadAll = function(year, month) {
        Planner.get({year: year, month: month+1}, function(result) {
            $scope.planner = result;
        });
    };
    $scope.$watchGroup(['mom.year()', 'mom.month()'], function(newValues, oldValues, scope) {
        $scope.loadAll(newValues[0], newValues[1]);
        $scope.dateRange = _.chain(
            _.range(1, $scope.mom.clone().endOf('month').date()+1))
            .map(function(d) {
                return moment().year(newValues[0])
                                .month(newValues[1])
                                .date(d);
            })
            .value();
    });

    $scope.switchMonth = function(dir) {
        //...
    };

    $scope.getColor = function(day, user) {
        //...
    };

    $scope.sum = function(day, shift) {
        //...
    };

    $scope.getEntry = function(day, user) {
        return $scope.planner.entries[day.format('YYYY-MM-DD')][user.login];
    };

    $scope.setShift = function(shiftEntry, shift) {
        shiftEntry.shift = shift;
        ShiftEntry.update(shiftEntry);
        // when line below is uncommented everything works and is updated
        //$scope.loadAll($scope.mom.year(), $scope.mom.month());
    };

    $scope.$watch('planner', function(newVal) {
        console.log(newVal);
    }, true );
});

和模板

<div class="shiftChart">
        <div class="users pull-left">
            <div class="lbl">Employee</div>
            <div class="user clearfix" ng-repeat="user in planner.users">
                <img ng-src="assets/images/avatars/{{user.login}}.jpg" alt="{{user.login}}">
                <div class="name">{{user.firstName}} {{user.lastName}}</div>
                <div class="extra">{{user.login}}</div>
            </div>
        </div>
        <div class="dates-wrapper">
            <div class="dates pull-left" ng-repeat="day in dateRange" ng-class="{'weekend' : day.isWeekendDay(), 'today' : day.isSame(moment(), 'day')}">
                <div class="lbl">{{day.format('DD')}}</div>
                <div class="entries">
                    <div class="entry" ng-repeat="user in planner.users">
                        <div class="shift" style="background-color: ${{getColor(day, user)}}" planner-shift-changer></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

雇员
{{user.firstName}{{user.lastName}}
{{user.login}
{{day.format（'DD'）}

请使用相关代码（控制器和html）更新您的问题，可能对我有帮助，我应该使用ng样式而不是类似的样式