CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangular-ui
user2501711
user2501711

Reputation: 577

Angularjs ng-click not firing under ng-bind-html-unsafe

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();'>&times;</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

Answers (1)

Mathew Berg
Mathew Berg

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

Related Questions