Question

我需要在点击时添加动态模板，因为我使用过：

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但没有添加任何超链接。

提示会很明显。

由于

Answer 1

我认为您忘记了控制器中的 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>

Answer 2

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

＆＃13;

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);  
});

＆＃13;

<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>

＆＃13;

如何在动态html模板中添加ui-sref？

2 个答案: