使用window.location

时间:2015-04-24 19:03:01

标签: javascript jquery angularjs angular-ui-router window.location

这是一个很长的镜头,但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"
        }
      }
    });
}]);

更新(2015年4月27日)

我解决了我的特定问题,只是摆脱了jQuery History以及它增加的功能,超出了我们的需要。相反,我只是直接与window.history

进行互动
 window.history.pushState({panel: "panel3"}, 
    document.title + " | " + 'panel3', 
    window.location.href + "/panel3");

我仍然很好奇导致这种交互的原因以及角度或角度ui-router是否直接与window.location交互?

1 个答案:

答案 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 } } 服务兼容的方式实现所有功能,因此可能会有相当多的工作。