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);
});
}
Comments
-
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
obj
s. Which means that the value ofarr
, representing the current page ofobj
s, will change. However, theobj
in thestatus-stored-in="obj"
part is not refreshed with the change.Right now my solution is to add a
ng-if
incustomDirective
, 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].