Reputation: 577
This is the directive
aomApp.directive('aomAlert', function ($rootScope,$compile) {
return {
restrict:'EA',
transclude:true,
replace:true,
scope: {type: '=', msgCollection: '=', close: '&'},
controller: function ($scope, $element, $attrs,$compile) {
$scope.show = false;
$scope.$watch('msgCollection', function(selectedPlan) {
$scope.show = ($scope.msgCollection.length > 0);
});
},
template:
"<div class='alert' ng-class='type && \"alert-\" + type' ng-show='show'>" +
" <button ng-show='closeable' type='button' class='close' ng-click='show = false;close();'>×</button>" +
" <ul>" +
" <div ng-repeat='msg in msgCollection'><li><div ng-bind-html-unsafe=msg></div></li></div>"+
" <ul>" +
"</div>",
link: function($scope, $element, $attrs) {
$scope.closeable = "close" in $attrs;
}
};
});
and in the controller I put the link into the msg var
msg = msg.replace("[", "<a href='javascript:return false' ng-click='alert()'>");
msg = msg.replace("]", "</a>");
However the ng-click doesnt get triggered Anybody?
Upvotes: 3
Views: 3490
Reputation: 28750
Putting something into html-bind-unsafe doesn't compile it. You'd have to tell the element to compile with the scope. Here's the docs on $compile: http://docs.angularjs.org/api/ng.$compile
edit Ok, you don't need to use $compile from your responses in the comments. There are two ways of going about doing this, one is you tell clickme to call $parent.clickme on the scope:
scope.clickme = function(){
scope.$parent.clickme();
};
fiddle: http://jsfiddle.net/a4ang/3/
The other is you pass in clickme as an attribute, directive:
scope: {
data: '=',
clickme: '='
},
Html
<toggle-buttons data="data" clickme="clickme"></toggle-buttons>
Updated fiddle: http://jsfiddle.net/a4ang/4/
Upvotes: 1