我正在处理的网站有一个自定义CMS,我正在使用angularjs进行内联页面编辑。数据库存储用于生成页面的HTML,因此我无法严格使用客户端模板和模型。
我没有使用HTML5 pushState,因此网址就像 example.com/page#/widget/1/edit 或 example.com/page#/widget/new < / em>,我当前的问题是,当我提交表单来编辑窗口小部件或添加窗口小部件时,我希望页面通过将HTML注入DOM并将URL更改为默认值来重新加载其内容,我将我试着$location.path('/')
。
我当前的实现有多个问题(您将在演示中看到),其中一个是我的表单submit()
回调,更改$location.path
只更改第二个表单按钮上的URL单击。我也尝试更改单击“删除”的URL,这也不起作用。
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);
};
});
答案 0 :(得分:8)
setTimeout()
与Angular不能很好地混合(Angular使用一个事件循环来检查模型的变化,但是为了能够做到这一点,它必须能够控制你应用的所有部分; setTimeout()
超出了Angular的控制范围,当你的应用程序的Angular部分的任何更改都在setTimeout
- 处理程序中进行时,它通常需要在这些更改之前进行另一个'round'的Angular事件循环被接走了。
如果用Angular自己的$timeout()
替换它(确保也注入它),它会更好(jsfiddle)。