angularjs $location.path обновляет только URL при втором клике

Question

Сайт, над которым я работаю, имеет собственную CMS, и я использую angularjs для редактирования встроенных страниц. База данных хранит HTML, используемый для генерации страниц, поэтому я не могу строго использовать шаблоны и модели на стороне клиента.

Я не использую HTML5 pushState, поэтому URL-адреса имеют вид example.com/page#/widget/1/edit или example.com/page#/widget/new, и моя текущая проблема заключается в том, что при отправке формы для редактирования виджет или добавить виджет, затем я хочу, чтобы страница перезагрузила его содержимое путем внедрения HTML в DOM и изменила URL-адрес по умолчанию, что я пытаюсь с $location.path('/'),

Моя текущая реализация имеет несколько проблем (которые вы увидите в демонстрационной версии), одна из которых заключается в моей форме submit() обратный звонок, изменение $location.path изменяет только URL при нажатии второй кнопки формы. Я также пытаюсь изменить URL, который я нажимаю "Удалить", и это тоже не работает.

http://jsfiddle.net/sZrer/1

customPage.controller('PageEditCtrl', function($scope, $http, $routeParams, $location, $route, $compile, PageState) {
    var widgetId = $routeParams.id || widgetCount + 1;

    $scope.pageState = PageState;
    $scope.widget = { id: widgetId, name: 'Widget ' + widgetId };
    $scope.submit = function() {
      if ($scope.widget.id > widgetCount) widgetCount += 1;
      setTimeout(function() {
        var element = $compile(genHtml())($scope);
        angular.element('#page-content').html(element);
        $location.path('/');
      }, 100);
    };
  });

Answer 1

setTimeout() плохо сочетается с Angular (Angular использует цикл обработки событий, в котором он проверяет изменения в моделях, но для того, чтобы сделать это, он должен иметь возможность контролировать все части вашего приложения; setTimeout() Angular, и когда любые изменения в Angular-частях вашего приложения вносятся в setTimeout- обработчик, обычно требуется еще один "цикл" цикла событий Angular, прежде чем эти изменения будут обнаружены).

Если вы замените его на собственный Angular $timeout() (не забудьте также ввести его), он работает лучше ( jsfiddle).