更改根事件路径时的 ngRoute 无限循环
ngRoute infinite loop when changing path on a root event
我不确定为什么,但是当我从 JQuery 捕获事件时,更新路线并通知 Angular 更改,它进入无限路线。很容易重现,假设你有这样的屏幕:
按钮的点击由jQuery处理,因为jquery库在指令中似乎不起作用所以我把它放在一个服务中。一旦控制器加载我初始化它。然后,当用户单击该按钮时,我会捕获此 jquery 事件,并在根范围内引发一个新事件,以便我知道导航到新视图。这是代码:
(function(angular, $) {
var app = angular.module('app', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'ListController'
});
// The view I am trying to reach via jquery event.
$routeProvider.when('/Edit', {
templateUrl: 'edit.html',
controller: 'ListController'
});
$locationProvider.html5Mode(true);
}]);
app.controller('ListController',
function ListController($scope, $rootScope, $location, JQuerySerivce) {
// Initialize the button click listener.
JQuerySerivce.registerBtn();
$rootScope.$on('clicked', function() {
$location.path("./Edit");
// Notify angular stuff happened.
$scope.$apply();
});
});
app.controller('EditController', function EditController() {
console.log("Edit view loaded!");
});
app.factory("JQuerySerivce", function ($rootScope){
return {
registerBtn: function() {
$('#jqueryBtn').on('click', function() {
$rootScope.$broadcast('clicked');
});
}
};
});
})(angular, jQuery);
工作的 plunker 示例:
https://embed.plnkr.co/WIwRreYtofGKQWdjTeQx/
[编辑]
为了澄清我的问题,我怎样才能防止这种无限循环发生?我发现的所有其他关于路由和无限循环的问题通常都是某种引入循环的错误。在这种情况下,我只是在导航,而框架正在消亡。也许我的方法是错误的?如果有人有其他选择,我愿意改变它。我无法逃避 jquery 事件:/任何帮助将不胜感激。
$location.path("/Edit");
而不是
$location.path("./Edit");
?
我不确定为什么,但是当我从 JQuery 捕获事件时,更新路线并通知 Angular 更改,它进入无限路线。很容易重现,假设你有这样的屏幕:
按钮的点击由jQuery处理,因为jquery库在指令中似乎不起作用所以我把它放在一个服务中。一旦控制器加载我初始化它。然后,当用户单击该按钮时,我会捕获此 jquery 事件,并在根范围内引发一个新事件,以便我知道导航到新视图。这是代码:
(function(angular, $) {
var app = angular.module('app', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'ListController'
});
// The view I am trying to reach via jquery event.
$routeProvider.when('/Edit', {
templateUrl: 'edit.html',
controller: 'ListController'
});
$locationProvider.html5Mode(true);
}]);
app.controller('ListController',
function ListController($scope, $rootScope, $location, JQuerySerivce) {
// Initialize the button click listener.
JQuerySerivce.registerBtn();
$rootScope.$on('clicked', function() {
$location.path("./Edit");
// Notify angular stuff happened.
$scope.$apply();
});
});
app.controller('EditController', function EditController() {
console.log("Edit view loaded!");
});
app.factory("JQuerySerivce", function ($rootScope){
return {
registerBtn: function() {
$('#jqueryBtn').on('click', function() {
$rootScope.$broadcast('clicked');
});
}
};
});
})(angular, jQuery);
工作的 plunker 示例:
https://embed.plnkr.co/WIwRreYtofGKQWdjTeQx/
[编辑]
为了澄清我的问题,我怎样才能防止这种无限循环发生?我发现的所有其他关于路由和无限循环的问题通常都是某种引入循环的错误。在这种情况下,我只是在导航,而框架正在消亡。也许我的方法是错误的?如果有人有其他选择,我愿意改变它。我无法逃避 jquery 事件:/任何帮助将不胜感激。
$location.path("/Edit");
而不是
$location.path("./Edit");
?