Как добавить UI-SREF в динамический шаблон HTML?

Question

Как добавить UI-SREF в динамический шаблон HTML?

Мне нужно добавить динамический шаблон на клик для этого я использовал:

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, но не добавляет никаких гиперссылок.

Намек будет заметен.

Спасибо

2

angularjs angular-ui-router ui-sref

Источник

user7390851 01 авг '17 в 11:26

2 ответа

Другие вопросы по тегам angularjs angular-ui-router ui-sref

user5137527 01 авг '17 в 11:41 2017-08-01 11:41 · Answer 1 · 2017-08-01 11:41

Вы должны доверять своему 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>

user2779307 01 авг '17 в 11:36 2017-08-01 11:36 · Answer 2 · 2017-08-01 11:36

Я думаю, что вы забыли 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>