Angular 1.3升级至1.6后第三方回调中ui-sref链接失效问题

看起来你在把AngularJS从1.3升级到1.6后，遇到了第三方地图库渲染的动态链接无法跳转的问题，我来帮你拆解下问题根源和解决办法：

1. 先把ui-sref的语法错误修好 #

你生成的ui-sref字符串格式完全不对，AngularJS 1.6对指令语法的校验更严格，这种错误写法直接会导致指令失效（1.3可能容错性强一点，但本身就是错的）。

正确的ui-sref应该是状态名称+参数对象的格式，而不是把参数拼成像路径一样的字符串。你现在的写法把参数写成了tracks/track({area:xx + /trackId:xx/type:xx})，这完全不符合规范。

修正后的getTrackLink函数可以用ES6模板字符串来避免拼接错误，看起来更清晰：

function getTrackLink(track) {
  trackLink = `<div><a ui-sref="track({area: '${track.area}', trackId: '${track.id}', type: '${track.type}'})">${track.name}</a></div>`;
  console.log(trackLink);
  return trackLink;
}

2. 动态生成的DOM需要手动编译 #

你的链接是通过第三方地图库动态渲染的，这部分DOM是在Angular的初始编译周期之外生成的——Angular只会自动编译页面加载时就存在的DOM，动态添加的元素不会被自动解析指令（比如ui-sref），这才是升级后问题暴露的核心原因。

解决办法是用Angular的$compile服务手动编译动态生成的HTML，步骤如下：

第一步：给MapCtrl注入$compile和$scope #

修改控制器的依赖注入，加上这两个服务：

function MapCtrl($rootScope, $http, $stateParams, SearchOp, SearchResultsService, $state, $compile, $scope) {
  // ... 你的原有代码
}

第二步：在插入动态HTML后执行编译 #

假设你的loadMap函数里会把getTrackLink返回的HTML插入到地图的弹窗或信息窗口中，那你需要在插入DOM后，用$compile处理这个元素：

比如在loadMap里，当你把链接HTML添加到DOM后：

// 假设element是刚插入到页面的包含链接的DOM元素
const compiledElement = $compile(element)($scope);
// 用编译后的元素替换原来未编译的元素
element.replaceWith(compiledElement);

或者也可以在生成HTML的时候直接编译好再插入：

// 在MapCtrl里调用getTrackLink时
const rawHtml = getTrackLink(track);
const compiledHtml = $compile(rawHtml)($scope);
// 然后把compiledHtml添加到地图的DOM容器中

3. 别忘了修正路由状态的URL配置 #

你的路由状态里，URL参数之间有多余的空格：

.state('track', { 
  url: '/:area /:trackId /:type', // 这里的空格必须去掉！
  parent: 'tracks', 
  component: 'trackDetails' 
})

URL中的参数分隔不能有空格，改成下面这样：

url: '/:area/:trackId/:type'

这个错误也会导致即使链接能点击，路由也无法正确匹配跳转。

最后总结下修复顺序 #

1. 先把路由URL里的空格去掉，确保路由规则正确
2. 修正getTrackLink里的ui-sref语法，改成正确的状态+参数对象格式
3. 在动态插入HTML后，用$compile服务编译元素，让Angular解析ui-sref指令

按照这个步骤来，应该就能解决升级后链接无法跳转的问题了。

内容的提问来源于stack exchange，提问作者darren.roberts