1

I am post-processing the output of prettify to highlight some lines in the code. I'm using code like this, which works fine:

x = angular.element('.prettify li:nth-child(' + zz['line'] + ')');
x.css('background-color', 'yellow');
x.prop('title', zz['message']);

Now, instead of using the title tag to show a message on the line, I want to use Bootstrap tooltip. The obvious change to the above code is:

x.prop('tooltip', zz['message']);

However, this doesn't work. I presume I need to tell Angular to recompile the block, so it picks up the directive for tooltop (hence the title of the question).

Update - here is a fiddle showing what I am trying to do: http://jsfiddle.net/6Y4d9/

paj28
  • 2,210
  • 3
  • 25
  • 37

2 Answers2

2

to recompile thr block - you should use $compile service, like so:

$compile(block)(scope)

BUT, for your task your need just:

scope.$apply()

And:

change x.prop to x.attr

http://jsfiddle.net/6Y4d9/1/

Stepan Suvorov
  • 25,118
  • 26
  • 108
  • 176
  • Thanks, but this didn't seem to help. I have added a link to a fiddle that should explain things better. – paj28 Feb 28 '14 at 13:50
0

If you ever need to force angular to re-digest a certain scope, all you have to do is call:

$scope.$apply();

This will for the $scope to re-apply any changes that may have occurred since the last time it applied. These types of applies only need to be run when the initial event that created the interaction because from an event-handler that is outside of the angular app.

Another option you have is to call:

$scope.$apply(function(){
    //put your code in here, and it will run your code and then apply it to the current scope
});
frosty
  • 21,036
  • 7
  • 52
  • 74
  • Thanks, but this didn't seem to help. I have added a link to a fiddle that should explain things better. – paj28 Feb 28 '14 at 13:53