这是一个很长的镜头,但UI路由器如此受欢迎,想到也许有人会对这个问题有所了解。
我正在将项目迁移到Angular JS。该项目由一个包含多个不同面板的页面组成 - 每个面板都是从服务器下载的,带有AJAX的HTML,使用Javascript注入到页面中,并与自己的href相关联,由jQuery History管理。
jQuery历史跟踪浏览器状态并在每个面板注入Javascript后相应地更新window.href。例如:
Panel 1:
window.location.href // http://myapp.com/panel1
History.getLocationHref() // http://myapp.com/panel1
History.getPageUrl() // http://myapp.com/panel1
Panel 2:
window.location.href // http://myapp.com/panel2
History.getLocationHref() // http://myapp.com/panel2
History.getPageUrl() // http://myapp.com/panel2
Panel 3:
window.location.href // http://myapp.com/panel3
History.getLocationHref() // http://myapp.com/panel3
History.getPageUrl() // http://myapp.com/panel3
等等。
因为每个面板都是注入的,而不是在注入DOM后使用Angular编译它们,所以我为每个面板引导了单独的AngularJs应用程序。到目前为止,这已经很好了。
现在我在Panel 2中使用AngularJs UI-router - 所以我可以在替代模板中呈现数据。问题是,UI-Router必须以某种方式混淆浏览器历史记录和/或窗口href。因为一旦该应用程序被实例化,让我说我从Panel 1开始,然后单击Panel 2,然后单击Panel 3,我有这个问题:
Panel 1:
window.location.href // http://myapp.com/panel1
History.getLocationHref() // http://myapp.com/panel1
History.getPageUrl() // http://myapp.com/panel1
Panel 2:
window.location.href // http://myapp.com/panel2
History.getLocationHref() // http://myapp.com/panel2
History.getPageUrl() // http://myapp.com/panel2
Panel 3:
window.location.href // http://myapp.com/panel2
History.getLocationHref() // http://myapp.com/panel2
History.getPageUrl() // http://myapp.com/panel3
基本上,一旦用应用程序实例化UI-Router,jQuery History就不再有效了,位置href仍然存在于ui-router app的URL中。
我可以做些什么来禁用ui-router与窗口位置href的交互?或者是模块如何工作的组成部分?
这是我的panel2.states.js文件,如果它有帮助:
angular.module("panel2")
.config(["$stateProvider", function($stateProvider) {
$stateProvider
.state('table', {
views: {
index: {
// controller: "TableController as at",
templateUrl: "table.html"
}
}
})
.state('tiles', {
views: {
index: {
// controller: "TilesController as tc",
templateUrl: "tiles.html"
}
}
});
}]);
我解决了我的特定问题,只是摆脱了jQuery History以及它增加的功能,超出了我们的需要。相反,我只是直接与window.history
:
window.history.pushState({panel: "panel3"},
document.title + " | " + 'panel3',
window.location.href + "/panel3");
我仍然很好奇导致这种交互的原因以及角度或角度ui-router是否直接与window.location交互?
答案 0 :(得分:1)
Angular公开$location
服务与window.location
对象进行交互,我非常确定ui-router
直接使用window.location
对象而不是$location
对象。您可以config
来自$location
函数的window.location
服务拦截对$provide.decorate('$location', function($delegate) {
var currentUrl = '';
//we base the proxy on the original
var locationProxy = Object.create($delegate);
//and overwrite what we need
locationProxy.url = function(newUrl) {
if (newUrl) {
$rootScope.$broadcast('$locationChangeStart' /* other event args here*/);
currentUrl = newUrl;
$rootScope.$broadcast('$locationChangeSuccess' /* other args here */);
} else {
return currentUrl;
}
};
});
服务的所有调用,并提供您自己的不使用$location
的实现。< / p>
e.g。 (高度简化):
public class KillDeathCounter extends JavaPlugin {
public void onEnable() {
new PlayerListener(this);
getLogger().info("Players will not be able to kit spam.");
this.getConfig().addDefault("playerkills", 0);
this.getConfig().addDefault("playerdeaths", 0);
this.getConfig().options().copyDefaults(true);
saveConfig();
}
public void onDisable() {
getLogger().info("Kill Death Counter has been disabled.");
saveConfig();
}
public boolean onCommand(CommandSender sender, Command cmd, String label,
String[] args) {
if (cmd.getName().equalsIgnoreCase("digipvp")) {
Player p = (Player) sender;
p.sendMessage(ChatColor.AQUA
+ "Our PVP plugin was developed by Pierre Lichtlé, the owner, also known as Master Digi."
+ " If you would like to contact him for a plugin, send him an email at developer.petlamb@gmail.com."
+ " Thanks for playing on our server!");
return true;
}
return false;
}
}
package me.katsunicalis.plugin;
import org.bukkit.ChatColor;
import org.bukkit.Statistic;
import org.bukkit.entity.Entity;
import org.bukkit.entity.Player;
import org.bukkit.event.EventHandler;
import org.bukkit.event.Listener;
import org.bukkit.event.entity.EntityDeathEvent;
import org.bukkit.event.entity.PlayerDeathEvent;
public class PlayerListener implements Listener {
KillDeathCounter kdc;
public PlayerListener(KillDeathCounter plugin) {
plugin.getServer().getPluginManager().registerEvents(this, plugin);
kdc = plugin;
}
@EventHandler
public void playerKillsPlayer(EntityDeathEvent e) {
Entity deade = e.getEntity();
Entity killer = e.getEntity().getKiller();
if (killer instanceof Player && deade instanceof Player){
int kills = kdc.getConfig().getInt("playerkills");
int deaths = kdc.getConfig().getInt("playerdeaths");
kdc.getConfig().set("playerkills", kills += 1);
kdc.getConfig().set("playerdeaths", deaths += 1);
killer.sendMessage("You now have " + kills + " kills!");
deade.sendMessage("You now have " + deaths + " deaths!");
}
}
}
它确实要求您以与原始@RunWith(AndroidJUnit4.class)
public class NextActivityTest {
@Rule
public ActivityTestRule<NextActivity> activityRule
= new ActivityTestRule<>(
NextActivity.class,
true, // initialTouchMode
false); // launchActivity. False to customize the intent
@Test
public void intent() {
Intent intent = new Intent();
intent.putExtra("your_key", "your_value");
activityRule.launchActivity(intent);
// Continue with your test
}
}
服务兼容的方式实现所有功能,因此可能会有相当多的工作。