AngularJS使用ui-sref链接将HTML添加到变量

Question

我有以下代码，将html添加到变量中。但是，当它显示在页面上时，链接无法正常工作。

插入动态内容并使ui-sref链接正常工作的最佳方法是什么？ JAVASCRIPT

.controller('page', function($scope, $rootScope, $http, $state, $sce) {

    $scope.message = $sce.trustAsHtml('A <a ui-sref="login">login</a> link');

})

HTML

<div ng-bind-html="message"></div>

- bryan

---

可能需要使用$compile - $sce.trustAsHtml($compile('A <a ui-sref="login">login</a> link')($scope)); - tymeJV

你为什么要动态添加它？难道不能直接将其放在模板/HTML文件中吗？ - ajkavanagh

Answer 1

这里有一个可行的 plunker：点击这里

我们可以使用以下组合方式：

• $state.href() （文档请参见此处） 和
• ng-href （文档请参见此处）

（仅当传递的参数是 URL 的一部分时可用）

这将是结果。

<a ng-href="{{$state.href(myStateName, myParams)}}">

现在，我们可以在plunker中将myStateName更改为parent、parent.child、home，这将正确地更改生成的href：

<input ng-model="myStateName" />
<input ng-model="myParams.param" />

因为这些是Plunker中的状态。

$stateProvider
  .state('home', {
      url: "/home",
      ...
  })
  .state('parent', {
      url: "/parent?param",
      ...
  })
  .state('parent.child', { 
      url: "/child",
      ...

Check it here

- Radim Köhler