angularjsng-bind-html

Angular ng-bind-html and ng-mouseover don't work (don't appears in code)


I try to add some code with ng-bind-html with included ng-mouseover. But the ng-mouseover part didn't appear (didn't work) in the code

Sample from angular plunker and add my piece of code:

ng-mouseover="test($event)"

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML =
       'I am an <code>HTML</code>string with ' +
       '<a ng-mouseover="test($event)" href="#">links!</a> and other <em>stuff</em>';

    $scope.test = function(event) {
      console.log(event);
    }

  }]);
})(window.angular);

https://plnkr.co/edit/gp3Z50TJqvEfOFGrpYCT?p=preview

The $scope.test() function was never fired. There is no event appears on mouseover above this small link.

Any hint?


Solution

  • You need to write custom directive that evaluates html within scope.