Question

87

ng-click not working after compile ng-bind-html

rated 0 times [ 89] [ 2] / answers: 1 / hits: 18336 / 11 Years ago, sun, january 26, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

frankiebobbyc

Add To Favorites

Follow

Total Points: 18

Total Questions: 85

Total Answers: 104

Location: Norway

Member since Wed, Jul 7, 2021

3 Years ago

frankiebobbyc questions

1 Most efficient way to update an object property within an array of objects

Mon, Jan 17, 22, 00:00, 2 Years ago

1 Cypress, get the index of a specific element returned from cy.get()

Wed, Jan 12, 22, 00:00, 2 Years ago

1 in the sake of increasing code performance... ESLint is reporting Arrow function has a complexity of 21. Maximum allowed is 20

Mon, Mar 29, 21, 00:00, 3 Years ago

1 D3 V6 - Zoom and Drag Functionality

Mon, Oct 12, 20, 00:00, 4 Years ago

1 Coinbase pro web socket get the current price for a currency

Wed, Jun 10, 20, 00:00, 4 Years ago

View All

answered 11 Years ago annalise · Accepted Answer

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