Question

这是我的故事。我的观点显示了每位用户每天的轮班。

我的模型非常复杂，看起来像这样：

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

在控制器中，我创建一系列日期，用户数组并迭代我的结构，为每个用户/天创建一个单元格。

对于我的每个单元格，我都有一个带有扩展名的指令，点击后，调用控制器setShift（单元格，移位），我用新的移位更新单元格并进行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>

观察复杂结构属性的变化

0 个答案: