AngularJS：将ui-router中的href重写为ui-sref

Question

我会翻译中文，这段内容是关于编程的。需要根据特定规则重写链接的href属性。CMS会在页面上打印出类似以下内容：

<a href="/path/to/the/zoo/gorilla.html">Go</a>

我们的路由器实际上需要指向。

#/zoo/gorilla

如果我们自己编写这个链接，它会是这个样子：

<a ui-sref="zoo('gorilla')>Go</a>

问题是，我们不能保证 /zoo/gorilla 部分总是意味着我们在 zoo('gorilla')。

最简单的方法是将 CMS URL 解析为路由器 URL ，然后执行以下操作：

link.attr("href", "#/zoo/gorilla");

我明白这通常与ui-router的理念背道而驰，但我希望能找到一种方法，在这个奇怪的情况下使用它。

- oooyaya

Answer 1

我认为这个可以实现，基本上是一个指令来改变你在点击时要前往的URL。

module.directive('newHref', ['$location',function($location) {
    return function(scope, element, attrs) {
        element.bind('click', newHref);

        function newHref(event) {
            var hrefList = event.target.href.split("/");
            var parent = hrefList[hrefList.length-2];
            var child = hrefList[hrefList.length-1].split(".")[0];

            $location.path("/" + hrefList.slice(0, hrefList.length-2).join("/") + "/" + parent + "/" + child);
        }
    }
}]);

使用方法如下：

<a href="/path/to/the/zoo/gorilla.html" new-href>Go</a>

- user1184321

---

在提问之前，我已经尝试过了。更改href会将URL指向正确的哈希值，但状态不会识别此更改。 - oooyaya

@oooyaya修改了代码，使路由器能够看到更改。 - user1184321

这就是我所做的。问题实际上是其他事情——使用ui-router命名子视图并在views对象中定位它们。这就是为什么视图从未改变——因为我没有告诉它去哪里。 - oooyaya

Answer 2

看起来像是进入危险区域，但你可以创建一个“href”指令，它将自动替换href属性的值。不需要额外的属性，但这可能会使您的代码有点模糊...

module
  .directive('href', function() {
    return function(scope, element, attrs) {
        var ngUrl; // convert CMS url to Angular URL somehow
        if(attrs.href === '/path/to/the/zoo/gorilla.html') {
            ngUrl = '#/zoo/gorilla';
        }

        element[0].href = ngUrl;
    };
});

点击这里查看

- Eryk Napierała

---

我们做过类似的事情。也许这是一个虚假症状。href确实会改变，当我们点击它时URL也会改变为我们想要的，但视图不会改变。这意味着有一些明显的东西吗？它匹配了一个路由，并且部分加载，但从未显示。 - oooyaya