Предоставление директив в $ sce.trustAsHtml
Я включил Plunker здесь: http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview
Я пытаюсь добавить кнопку в DOM, и при нажатии на нее должна выполняться связанная с ней функция. В этом случае он должен предупредить «тестирование». Вот код.
controller
- В чем разница между «@» и «=» в области действия в AngularJS?
- AngularJS: фильтр ng-repeat, когда значение больше, чем
- Конфигурация данных с координатами angularjs между controllerами
- Вызовите функцию controllerа из директивы без изолированной области в AngularJS
- Обновить переменную родительской области в угловом
app.controller('MainCtrl', function($scope, $sce) { $scope.trustedHtml = $sce.trustAsHtml(''); $scope.testAlert = function () { alert('testing') }; }); HTML
- Как установить атрибут id элемента HTML динамически с помощью angularjs (1.x)?
- Confused об Angularjs, заключаемых и изолирующих областях и привязках
- Как изменить область действия внутри директивы в AngularJs
- Как обнаружить браузер с помощью angularjs?
- Как использовать $ rootScope в Angular для хранения переменных?
- AngularJS: список ng-repeat не обновляется, когда элемент модели сплайсируется из массива модели
- AngularJS: $ q -> отложенный API-код вещей (жизненный цикл) И кто вызывает дайджест?
- ng-click не работает в шаблоне директивы
$sce.trustAsHtml и ng-bind-html не предназначены для создания HTML с директивами. Этот метод не будет работать.
Это потому, что угловые работы сначала компилируются, а затем связываются. См. Концептуальный обзор для хорошего объяснения.
Короче говоря, к тому моменту, когда вы связываете HTML, определенный в вашем trustAsHtml , слишком поздно для углового компиляции (и, следовательно, понимания) директивы ng-click .
Чтобы динамически добавлять HTML, вы должны смотреть на службу $compile (и / или директивы). Документы здесь .
Извините за мой плохой английский.
Для Angular 1.6.1 я нашел решение, которое сработало для меня.
шаблон:
В controllerе:
$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); } }) } }; })