Rendering директивы в пределах $ sce.trustAsHtml

Я включил Plunker здесь: http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

Я пытаюсь добавить кнопку в DOM и при нажатии должен выполнять функцию, связанную с ним. В этом случае он должен предупредить «тестирование». Вот код.

контроллер

app.controller('MainCtrl', function($scope, $sce) { 
     $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>'); 

     $scope.testAlert = function() { 
      alert('testing') 
     }; 
});

HTML

<body ng-controller="MainCtrl"> 
    <div ng-bind-html="trustedHtml"></div> 
</body>

источник

2013-12-16 rjm226

Отъезд: http://stackoverflow.com/questions/20358140/ng-click- doesnt-fire-when-added-post-load – KayakDave

$sce.trustAsHtml и ng-bind-html не предназначены для создания HTML с директивами. Этот метод не будет работать.

Это потому, что угловые работы сначала компилируются, а затем соединяются. См. conceptual overview за хорошее объяснение.

Короче говоря, к тому времени, когда вы связываете HTML, определенный в вашем trustAsHtml, слишком поздно для углового компиляции (и, следовательно, понимания) директивы ng-click.

Для динамического добавления HTML вы должны смотреть сервис $compile (и/или директивы). Docs are here.

источник

2013-12-16 23:37:30

+17

Правильно. Вот новый плункер, показывающий, как это было достигнуто при компиляции $. http://plnkr.co/edit/3CewDscih8diAo4mMSwJ?p=preview Вот некоторые другие ресурсы, которые помогли мне решить эту проблему: http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html -strings-from-database – rjm226

Это возможно при построении строки в таблице и впрыскивании html, содержащей ключевую динамическую директиву? – AnxiousdeV

Желаю вам показать, как конкретно решить проблему. –

Извините за мой плохой английский.

For Angular 1.6.1 Я нашел решение, которое сработало для меня.

шаблона:

<div ng-bind-html="trustAsHtml(content);" init-bind> </div>

В контроллере:

$scope.trustAsHtml = function(string) { 
     return $sce.trustAsHtml(string); 
    };

Директива:

.directive('initBind', function($compile) { 
return { 
     restrict: 'A', 
     link : function (scope, element, attr) { 
      attr.$observe('ngBindHtml',function(){ 
       if(attr.ngBindHtml){ 
        $compile(element[0].children)(scope); 
       } 
      }) 
     } 
    }; 
})

источник

2017-02-06 13:55:27

Это также решение, если кто-то хочет попробовать. –

BRILLIANT! Большое использование директив и компиляции. Спасибо! – Vippy

Rendering директивы в пределах $ sce.trustAsHtml

ответ

Смежные вопросы