angularjs $ location.path只在第二次点击网址更新 [英] angularjs $location.path only updates URL on second click

问题描述

这是我的工作该网站有一个自定义的CMS，而我使用内嵌页面编辑angularjs。数据库中存储HTML用于生成的网页，所以我不能严格地使用客户端模板和模式。

我不使用HTML5 pushState的，所以URL是一样的 example.com/page#/widget/1/edit 或 example.com/page#/widget/new 的，和我现在的问题是，当我提交表单编辑窗口小部件或添加小工具，那么我希望页面通过注入HTML到DOM加载其内容并更改网址为默认，这是我'米， $ location.path试图（'/'）。

我目前实现了多个问题（你将在演示中看到），其中之一是，在我的表格提交（）回调，改变 $ location.path 仅改变在第二个表单按钮点击的URL。我也试图改变我点击删除的网址，那也不行。

http://jsfiddle.net/sZrer/1

  customPage.controller（'PageEditCtrl'，函数（$范围，$ HTTP，$ routeParams，$位置，$路径，$编译，PageState）{
    VAR为widgetid = $ routeParams.id || widgetCount的+ 1;    $ scope.pageState = PageState;
    $ scope.widget = {ID：为widgetid，名称：'部件'+为widgetid};
    $ scope.submit =功能（）{
      如果（$ scope.widget.id＆GT; widgetCount的）+ widgetCount的= 1;
      的setTimeout（函数（）{
        VAR元= $编译（GENHTML（））（$范围内）;
        。angular.element（'＃页面的内容'）HTML（元）;
        $ location.path（'/'）;
      }，100）;
    };
  }）;
 

解决方案

的setTimeout（）不与角拌匀（角使用一个事件循环，在此检查更改到模型，但要能做到这一点它必须能够控制自己的应用的各个部分; 的setTimeout（）超出的角度控制，当为您的应用程序的角部分的任何变化都在的setTimeout -handler做，它通常需要另一个角事件循环的圆这些变化都拿起之前）。

如果您有折角自己的 $超时更换（）（一定要还注入它），它工作得更好（的的jsfiddle ）。

The site that I'm working on has a custom CMS, and I'm using angularjs for inline page editing. The database stores HTML used to generate the pages, so I can't strictly use client-side templates and models.

I'm not using HTML5 pushState, so the URLs are like example.com/page#/widget/1/edit or example.com/page#/widget/new, and my current issue is that when I submit a form to edit a widget or add a widget, then I want the page to reload its content via injecting HTML into the DOM and change the URL to the default, which I'm trying with $location.path('/').

My current implementation has multiple issues (which you'll see in the demo), one of which is that in my form submit() callback, changing $location.path only changes the URL on a second form button click. I also try to change the URL which I click 'Delete', and that doesn't work either.

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);
    };
  });

解决方案

setTimeout() doesn't mix well with Angular (Angular uses an event loop in which it checks for changes to models, but to be able to do that it has to be able to control all parts of your app; setTimeout() is beyond the control of Angular, and when any changes to Angular-parts of your app are made in a setTimeout-handler, it usually takes another 'round' of the Angular event loop before those changes are picked up).

If you replace it with Angular's own $timeout() (be sure to also inject it), it works better (jsfiddle).

这篇关于angularjs $ location.path只在第二次点击网址更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！