Angular: How to force recompile directive?

15,930

Inside your directives link function you need to watch status-stored-in for changes and then recompile it e.g.:

   link: function(scope, element) {
    scope.$watch('statusStoredIn', function() {
      element.html(statusStoredIn);
      $compile(element.contents())(scope);
    });
   }  
Share:
15,930
Lucia
Author by

Lucia

Problem solver. Fast learner.

Updated on July 25, 2022

Comments

  • Lucia
    Lucia almost 2 years

    HTML:

    <div ng-repeat="obj in arr">
       <custom-directive status-stored-in="obj"></custom-directive>
    </div>
    

    Problem:

    I have page-turn built in for the large amount of objs. Which means that the value of arr, representing the current page of objs, will change. However, the obj in the status-stored-in="obj" part is not refreshed with the change.

    Right now my solution is to add a ng-if in customDirective, flickering its value back and forth to have it force recompiled. Is there any other equivalent, neater way to deal with this?

    Edit:

    The start of the custom directive:

    module.directive 'checkbox', (checkboxHooks) ->
      restrict: 'E'
      scope:
        hook: '='
        hookedTo: '='
        statusStoredIn: '='
      templateUrl: 'templates/checkbox.html'
      link: (scope, element, attr) ->
    

    The gist is that it needs to get hold of an object, for storing the checked status. The whole of it can be found here: [coffee/js].