Angularjs添加HTML变量与UI的SREF链接 [英] Angularjs adding html to variable with ui-sref link

问题描述

我有以下的code，增加了HTML给一个变量。然而，当它获得页面上显示的，该链接无法正常工作。

什么是动态插入时，它得到一个 UI-SREF 链接工作的最佳方式？

JAVASCRIPT

  .controller（页，函数（$范围，$ rootScope，$ HTTP，$状态，$ SCE）{    $ scope.message = $ sce.trustAsHtml（'A＆LT;一个UI的SREF =登陆GT＆;登录和LT; / A＆GT;链接'）;}）
 

HTML

 ＆LT; D​​IV NG绑定-HTML =消息＆GT;＆LT; / DIV＆GT;
 

解决方案

有一个工作plunker

我会说，我们可以用组合：

• $ state.href（） （文件的这里）和


• NG-HREF （文件的这里）的

的（但只有在情况下，如果通过了​​PARAMS是URL的一部分）的

这是结果

 ＆LT;一个NG-HREF ={{$ state.href（myStateName，myParams）}}＆GT;
 

和现在的（以的plunker ）我们可以改变的 myStateName 到父， parent.child ，首页，它将适当改变HREF产生的：

 ＆LT;输入NG模型=myStateName/＆GT;
＆LT;输入NG模型=myParams.param/＆GT;
 

由于这些是在plunker状态

  $ stateProvider
  .STATE（'家'，{
      网址：/家，
      ...
  }）
  .STATE（'父'，{
      网址：/父参数，
      ...
  }）
  .STATE（'parent.child'，{
      网址：/子，
      ...
 

检查一下这里

I have the following code that adds html to a variable. However, when it get's shown on the page, the link doesn't work.

What's the best way to get a ui-sref link to work when inserting it dynamically?

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>

解决方案

There is a working plunker

I would say, that we can use combination of:

• $state.href() (doc here) and
• ng-href (doc here)

(but only in case, if the params passed are part of url)

This would be the result

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

And now (in the plunker) we can change myStateName into parent, parent.child, home and it will change properly the generated href:

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

Because these are states in plunker

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

Check it here

这篇关于Angularjs添加HTML变量与UI的SREF链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！