Question

我选择了

ng-model="vm.selectedUserId"

在页面的某个地方我有

  .table-responsive(ng-if="vm.selectedUserId")
    %time-tracking-calendar( user-id="vm.selectedUserId" company-id="vm.companyId")

问题是：当vm.selectedUserId发生变化时，我希望重新呈现.table-responsive模块而不触及指令。我目前的解决方案是

  .table-responsive(ng-if="vm.selectedUserId && vm.showCalendar")
    %time-tracking-calendar( user-id="vm.selectedUserId" company-id="vm.companyId")

和

$scope.$watch('vm.selectedUserId', function() {
  vm.showCalendar = false;
  $timeout(function() {
    vm.showCalendar = true;
  }, 100);
});

在控制器中，但对我来说看起来太脏了。是否有一个更优雅的解决方案（除了在指令中观察userId变量的明显一个）？

Answer 1

我写了一个完全相似的指令

csapp.directive("csReloadOn", ["$timeout", "$log", function ($timeout, $log) {

    var getTemplate = function () {
        return '<div ng-if="doRefreshPageOnModeChange"><div ng-transclude=""></div></div>';
    };

    var linkFunction = function (scope, element, attrs) {
        scope.doRefreshPageOnModeChange = true;

        scope.$watch(attrs.csReloadOn, function (newVal, oldVal) {
            if (newVal === oldVal) return;
            $log.info("changed mode from : " + oldVal + ", to : " + newVal);
            scope.doRefreshPageOnModeChange = false;
            $timeout(function () { scope.doRefreshPageOnModeChange = true; }, 100);
        });
    };

    return {
        restrict: 'A',
        transclude: true,
        template: getTemplate,
        link: linkFunction
    };
}]);

angular.js在模型更改后重新渲染div

1 个答案: