ng-click not working after compile ng-bind-html
You don't need to deal with $sce to meet your purpose.
You can pass your HTML
as string to the directive. After compilation in the directive it'll work.
In HTML
where you need the directive
<dir id="dir" content="myVal"></dir>
Set different value in myVal
your controller
$scope.myVal = '<button ng-click=\'buttonClick()\'>I\'m button</button>'; // HTML as string
The directive
myApp.directive('dir', function($compile, $parse) {
return {
restrict: 'E',
link: function(scope, element, attr) {
scope.$watch(attr.content, function() {
element.html($parse(attr.content)(scope));
$compile(element.contents())(scope);
}, true);
}
}
})
Check the Demo
user1
My name is Iliya Idakiev and I'm a Google Developer Expert (GDE). I'm also a software developer/entrepreneur, as well as a JavaScript enthusiast with 7+ years experience in software development for the web. I'm is а co-organiser of Angular Sofia, commit.js, SofiaJS / BeerJS and a lecturer at Sofia University (Faculty of Mathematics and Informatics). I also do a lot of private and public trainings and from time to time I work as consultant/contractor. My main focus now is developing the JavaScript community in my country (Bulgaria) and growing my company - https://hillgrand.com/ In my spare time I like collecting and playing vinyl on musical events.
Updated on June 29, 2022Comments
-
user1 almost 2 years
I have a directive
app.directive("dir", function($compile, $sce){ return{ restrict: "E", link: function(scope, element, attr){ scope.$watch('content',function(){ var html = $sce.trustAsHtml(attr.content); scope.alabala = $compile(html)(scope); },true); }, template: "<div ng-bind-html='alabala'></div>", } });
a controller:
function MainController($scope, $http, customService, $location, $sce, $compile){ $scope.init = function(){ customService.get().success(function(data) { var html = $sce.trustAsHtml(data); $("#dir").attr("content", data); }); }; }
and on my index page I have:
<div id="div" ng-controller="MainController" class="pull-right span3" ng-init="init()"> <dir id="dir" ></dir> </div>
my custom service returns every time a different html containing for example
<button ng-click='click()'>Click me</button>
What I am trying to do is every time when I push a different value in the content of my directive to compile it and put it in my html and handle the click function from my controller. Because I'm new to AngularJS I have been struggling with this problem for sometime. Please help.
-
user1 over 10 yearsThank you so much!!! Works perfect! In the way I wrote it is the $sce the problem or Im not passing it the right way to the directive?
-
Vishnu Sureshkumar over 9 years@Reza - Could you please explain what $watch and $compile doing here. Would be happy if you could explain your code.
-
Tasnim Reza over 9 yearsHere
$watch
used for automatic rendering, it listening directive'scontent
value if content changed then it works. If you think your directive works only single time then you don't need$watch
. Here$parse
used for parsing the string content and$compile
will link newly generatedHTML
withscope
. -
mila about 9 years@Reza Can you please tell me how to pass a templateUrl into $scope.myVal? Thanks!
-
Tasnim Reza about 9 years@mila Here
$scope.myVal
is used to passHTML Content
as string NOTurl
. If you need to load atemplate
then use directive'stemplateUrl
like docs.angularjs.org/guide/directive#template-expanding-directive -
mila about 9 yearsThank you @Reza but I'm not sure templateUrl is my way to go since I need to load the template dynamically.
-
Tasnim Reza about 9 yearsThen you can use
templateUrl
asfunction
likefunction(elem, attr){ return 'customer-'+attr.type+'.html'; }
. In your directive add atype
attribute which indicate your template type and inside of function you can create yourdynamic template url
.