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

Question

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?

Mathew Berg · Accepted Answer · 2013-06-24 20:00:29Z

1

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/

edited Jun 24, 2013 at 20:00

answered Jun 19, 2013 at 15:00

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2501711 Over a year ago

I went through the doc , but still got confused about this issue, i have tried compiling the html-bind-unsafe in the template like this: <div ng-repeat='msg in msgCollection'><li>"+$compile("<div ng-bind-html-unsafe=msg></div>")+"</li></div>". But it still doesn't work

Mathew Berg Over a year ago

No, you'll have to do it in your directive after. Why are you using html-bind-unsafe in this manner? It's usually reserved for things not part of angular.

user2501711 Over a year ago

what do you mean by do it in directive after ? can you give me the code for that ? thanks for your reply

Mathew Berg Over a year ago

Set up a jsFiddle and i'll wire it together if i can.

user2501711 Over a year ago

I created a simple one here jsfiddle.net/a4ang, basically i want to call the clickme() in the controller instead of calling it within the directive. Now it is not firing when i click on the button

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related