2017-08-01 53 views
2

我需要在点击添加动态模板,我已经使用:如何在动态html模板中添加ui-sref?

var action_template=''; 
app.controller('EventCtrl',function($rootScope){ 
    action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png"></a></li></ul>';     
    $rootScope.template=action_template; 
}); 

在HTML:我已经使用ngSanitize

<ul> 
     <li ng-bind-html="template"></li> 
</ul> 

模板是完全追加,但没有HREF链接。

我做错了什么?还是有任何解决方案做同样的事情?

主要问题是无法添加任何角度指令,如ng-click,ng-href,ui-sref等。 但添加$ sce.trustAsHtml后,它添加了ui-sref但未添加任何超链接。

提示将是可观的。

感谢

+0

有你使用$ rootScope而不是$范围的理由? – kauffee000

+0

尝试$ rootScope.template = $ sce.trustAsHtml(action_template);.不要忘记在你的控制器 – Vivz

回答

2

我觉得你在你的控制器忘记trustAsHtml(您可以在运行后段看到,该UI-SREF是存在于源): -

var app = angular.module("myApp", []); 
 
var action_template=''; 
 
app.controller("myCtrl", function($scope,$rootScope,$sce) { 
 
    
 
    action_template = action_template +'<ul><li><a ui-sref="/root/authenticate">Link</a></li></ul>';     
 
    $rootScope.template=$sce.trustAsHtml(action_template); 
 
});
<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    
 
<ul> 
 
     <li ng-bind-html="template"></li> 
 
</ul> 
 
</div>

+0

中注入$ sce,它的工作效果非常好。现在感谢 – uday214125

2

您需要信赖您的HTML,使用$sce,请尝试以下代码

var jimApp = angular.module("mainApp", []); 
 
jimApp.controller('EventCtrl',function($rootScope, $sce, $scope){ 
 
    var action_template=''; 
 
    action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png" alt="Default image">Link</a></li></ul>';     
 
    $scope.template=$sce.trustAsHtml(action_template); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="mainApp" ng-controller="EventCtrl"> 
 
<ul> 
 
     <li ng-bind-html="template"></li> 
 
</ul> 
 
</div>

+0

,ui-sref存在,但它没有添加任何href链接,为什么?请看我最新的问题。 – uday214125

+0

@ user7390851我不明白你添加$ sce.trustAsHtml它给这样的后意思 – byteC0de

+0

,但它应该是这样 意味着汽车的href将被自动添加。 – uday214125