angularjs $location.path 仅在第二次单击时更新 URL

Question

我正在处理的网站有一个自定义 CMS，我正在使用 angularjs 进行内联页面编辑。数据库存储用于生成页面的 HTML，因此我不能严格使用客户端模板和模型。

我没有使用 HTML5 pushState，因此 URL 类似于 example.com/page#/widget/1/edit 或 example.com/page#/widget/new，而我当前的问题是当我提交要编辑的表单时一个小部件或添加一个小部件，然后我希望页面通过将 HTML 注入(inject) 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，并且当在 setTimeout 处理程序中对应用程序的 Angular 部分进行任何更改时，通常需要再进行 Angular 事件循环的“一轮”才能获取这些更改)。

如果你用 Angular 自己的 $timeout() 替换它(确保也注入(inject)它)，它效果更好( jsfiddle )。