AngularJS：ui路由器href重写为ui-sref

我有一个内容管理系统，强制网页的URL为特定模式。我们需要有条件地重写这些链接的hrefs。AngularJS：ui路由器href重写为ui-sref

CMS将打印在页面上是这样的：

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

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

#/zoo/gorilla

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

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

问题是，我们不能总是保证/ zoo/gorilla部分意味着我们在动物园（'gor利亚'）。

最简单的方法是将解析CMS网址到路由器的网址，只是这样做：

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

我明白为什么这是典型的对UI的路由器的想法，但我希望能找到一种方法将它用于这一个奇怪的案例。

来源

2015-04-15 oooyaya

我认为这会起作用，基本上是一条指令，用于在您点击它时更改指向哪个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>

来源

2015-04-15 16:41:19

我问尝试过这一点。更改href会将URL指向正确的哈希，但状态不会识别此更改。 – oooyaya

@oooyaya更改了代码以允许路由器查看更改 –

这就是我所做的。这个问题其实是另一回事 - 使用ui-router命名的子视图，并且必须将它们定位在视图对象中。这就是为什么这个观点从未改变 - 我没有告诉它去哪里。 – oooyaya

它看起来就像走进危险区，但您可以创建的“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; 
    }; 
});

See here

来源

2015-04-15 17:08:54

我们做了类似的事情。也许它是一个虚假的症状。 href确实发生了变化，并且URL在我们点击时变成我们想要的，但视图不会改变。有没有一些明显的东西呢？它匹配路线和部分载荷，但它从不显示。 – oooyaya

嗯，看到这个：http://jsfiddle.net/erykpiast/zog1yaxy/1/。它只是工作... –

AngularJS：ui路由器href重写为ui-sref

回答

相关问题